0

ウィンドウの背景としても機能する div の背景を変更するスクロール イベントを追加しようとしています (幅と高さが 100% です)。これは私が得る限りです。私はjqueryがあまり得意ではありません。クリック イベント リスナーのチュートリアルを見てきました。しかし、スクロールイベントをfalseとして返すなど、同じ概念を適用すると、どこにも行きません。また、人が配列の使用を提案するSOのチュートリアルを見ました。しかし、配列を使用するとかなり混乱します（主に構文が原因です）。

waypoints.jsや などのプラグインを使用できることは知っていますが、約skrollr.js50 ～ 60 に変更する必要があります (スクロール時にビデオが再生されているように見えるようにするため) ... しかし、それは実現可能ではありません。

これが私が使用しているコードです:-

*
{
    border: 2px solid black;
}

#frame
{
    background: url('1.jpg') no-repeat;
    height: 1000px;
    width: 100%;
}

</style>

<script>

$(function(){

for ( i=0; i = $.scrolltop; i++)
{
    $("#frame").attr('src', ''+i+'.jpg');
}

});

</script>

<body>

<div id="frame"></div>

</body>
4

2 に答える 2

1

for ループ内で、 のsrc属性を設定していますが#frame、それは ではありdivませんimg。

したがって、これの代わりに：

$("#frame").attr('src', ''+i+'.jpg');

これを試して：

$("#frame").css('background-image', 'url(' + i + '.jpg)');

elementjQueryを使用してスクロール イベントをターゲットにバインドするには:

$('#target').scroll(function() {
    //do stuff here
});

windowjQueryを使用してスクロール イベントを にバインドするには:

$(window).scroll(function () {
    //do stuff here
});

ここに jQueryのドキュメント.scroll()があります。

アップデート：

私が正しく理解している場合、これはあなたが達成したいことのjsFiddleに関する実用的なデモです。

CSS:

html, body {
    min-height: 1200px; /* for testing the scroll bar */
}

div#frame {
    display: block;
    position: fixed; /* Set this to fixed to lock that element on the position */
    width: 300px;
    height: 300px;
    z-index: -1; /* Keep the bg frame at the bottom of other elements. */
}

Javascript:

$(document).ready(function() {
    switchImage();
});

$(window).scroll(function () {
    switchImage();
});

//using images from dummyimages.com for demonstration (300px by 300px)
var images = ["http://dummyimage.com/300x300/000000/fff", 
              "http://dummyimage.com/300x300/ffcc00/000",
              "http://dummyimage.com/300x300/ff0000/000",
              "http://dummyimage.com/300x300/ff00cc/000",
              "http://dummyimage.com/300x300/ccff00/000"
             ];

//Gets a valid index from the image array using the scroll-y value as a factor.
function switchImage()
{
    var sTop = $(window).scrollTop();
    var index = sTop > 0 ? $(document).height() / sTop : 0;
    index = Math.round(index) % images.length;
    //console.log(index);
    $("#frame").css('background-image', 'url(' + images[index] + ')');
}

HTML:

<div id="frame"></div>

その他の提案:

div の代わりにbackground-imagebody のを変更することをお勧めします。ただし、これにa を使用する必要がdivある場合; 次に、サイズ変更イベント-istener を に追加し、サイズ変更windowごとにその div の高さを設定/更新することをお勧めします。その理由は; height:100%どのブラウザでも期待どおりに動作しません。

于 2013-01-19T16:52:55.210 に答える
0

私は自分の前にこれを行いました。もし私があなたなら、画像を背景として使用せず、代わりに通常の「img」タグを使用してページの上部に追加します。いくつかのcssを使用して、画像が下に留まるようにします。他のすべての要素。このようにして、画像のサイズを操作して画面の幅に合わせることができます。背景のサイズを正しく設定しようとすると、多くの問題が発生しました。

HTMLマークアップ：

<body>
<img src="1.jpg" id="img" />
</body>

スクリプトコード：

$(function(){

    var topPage = 0, count = 0;

    $(window).scroll( function() {
        topPage = $(document).scrollTop();

        if(topPage > 200) {
           // function goes here
           $('img').attr('src', ++count +'.jpg');
        } 
    });
});

これがあなたがやろうとしていることであるかどうかは完全にはわかりませんが、基本的に、ウィンドウをスクロールするときに、ページの上部に距離の値を割り当ててから、ifステートメントを実行して次のことを確認できます。ある点です。その後、実行したい関数を単に変更して実行します。

画像を変更したい範囲を指定したい場合は、次のようにします。これにより、上部からの距離である200〜400の特定の範囲でのみ関数を実行できるようになります。ページ。

$(function(){

    var topPage = 0, count = 0;

    $(window).scroll( function() {
        topPage = $(document).scrollTop();

        if(topPage > 200 && topPage < 400) {
           // function goes here
           $('#img').attr('src', ++count +'.jpg');
        } 
    });
});
于 2013-01-19T17:08:08.643 に答える