0

3 つの異なる背景画像があり、それらを次々と水平方向に追加したいと考えています。

#bgwrap{width:100%;height:100%; overflow:hidden;}
#bg1{width:1000px;height:100%; background: #000 url(bg1.jpg) no-repeat center top;}
#bg2{width:1000px;height:100%; background: #000 url(bg2.jpg) no-repeat center top;}
#bg3{width:1000px;height:100%; background: #000 url(bg3.jpg) no-repeat center top;}

後で、2 番目の背景を見たいときに、jquery を使用してビュー開始幅 = 1001px から 2000px のみを選択できます。では、それらを 1 つのクラスまたは ID にまとめて、jquery を使用して選択できるようにするにはどうすればよいでしょうか。

4

3 に答える 3

2

デモ

デフォルトの背景を設定してから、jQuery で変更できます。

$('body').css({
    'background-image': 'url('+ newBackgroundImage + ')'
});

私のデモでは、それらを配列に格納しました。

var bgs = ['bg1.jpg', 'bg2.jpg', '...'];

それぞれをプリロードする必要がある場合は、イメージを作成できます。

var ct = 0;
function loaded(){
    ct++;
    if (ct === bgs.length) {
        // all images are loaded
    }
}

for (var i=0; i<bgs.length; i++) {
    var img = document.createElement("img");
    img.onload = loaded;
    img.src = bgs[i];
}
于 2013-08-16T05:17:27.800 に答える
0

http://jsfiddle.net/4tb6Q/

<div id="div1">img1</div>
<div id="div2">img2</div>
<div id="div3">img3</div>

CSS

div {
height: 60px; //image height
width:60px; //image width
position:absolute;
}

jquery

$("button").click(function(){    
var $divL=$("div:last");
var $divF=$("div:first");
$divL.remove().insertBefore($divF);
});
于 2013-08-16T05:34:03.660 に答える