0

私はウェブサイトをコーディングしていますが、スクロールする一連の背景画像が必要です。トリッキーな部分は、アスペクト比を失うことなく、右と下にスクロールバーがなくても画面全体を占めるように背景画像を設定する必要があることです.

(私はこの図を使用して、希望どおりの背景を取得しました)

私のHTMLは次のようになります。

<div class="bg">
    <div class="slider">
        <div class="slider1"><img src="background1.jpg" class="back"/></div>
        <div class="slider2"><img src="background2.jpg" class="back"/></div>
        <!-- <div class="slider3">slide3</div>
        <div class="slider4">slide4</div>
        <div class="slider5">slide5</div> -->
    </div>
</div><!--end bg-->
<div class="buttons">
<div class="left"><--</div>
<div class="right">-></div> 
</div>

私のCSS：

.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;

overflow: hidden;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    .bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }

}

img.back {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.back {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}


.slider{
width: 200%;
position: relative;
}
.slider1, .slider2, .slider3, .slider4, .slider5{
width: 50%;
    float: left;
}

.buttons{
    position: absolute;
    top:200px;
    left: 200px;
    color: red;
    font-size: 50px;
}

そして私のjquery：

$(document).ready(function(){
var total = 2
var current = 1
$(".left").click(function(){
    if(current<total){
    current --
    $(".slider").animate({left:"-=100%"})
    }
})
    $(".right").click(function(){
        if(current>1){
        current ++
        $(".slider").animate({left:"+=100%"})
    }
})

})

私がやろうとしていることが可能かどうか教えてください！私が今抱えている主な問題は、jquery とパーセンテージでのアニメーション化にあると思います。

4

1 に答える 1

0

パーセンテージの高さと幅は、その親にも高さと幅がある場合にのみ機能します。したがって、高さ/幅をパーセンテージで指定するたびに、親に高さプロパティがあるかどうかを最初に検索し、パーセンテージもある場合は、高さ/幅がピクセル (または他のスケール) で見つかるまで DOM を上方向にトラバースします。

しかし、あなたの場合、ウィンドウの実際の高さはわかりません。したがって、height プロパティを指定する代わりに、ウィンドウ サイズを計算し、それを div の高さにピクセルとして割り当てることができます。

これはあなたのために働くかもしれません

CSS

.bg {
width:100%;
position:fixed;
overflow: hidden;
}

.slider{
position:absolute;
}

.slider1,slider2{
float:left;
}

img.back{
width:100%;
height:100%;
}

Jクエリ

    function resizeBackGround(){
    var windowHeight=$(window).height();
    var windowWidth=$(window).width();

    $('.slider').css({
    width:(windowWidth*2)+'px', //take multiple according to number of background image you are using.
    height:windowHeight+'px'
    });
    $('.slider1,.slider2').css({
    width:windowWidth+'px',
    height:windowHeight+'px'
    });

    }


    $(document).ready(function(){
      resizeBackGround();
      $(window).resize(function(){
         resizeBackGround();
      });

});

アニメーション機能を使用して背景画像を切り替えることができます。

于 2013-01-06T13:58:49.757 に答える