4

div内部にいくつかの画像が積み重ねられています。スクロール イベントは、表示される画像を制御する必要があります。ユーザーがスクロールしたときにアニメーションを開始したくないので、スクロール位置に応じて写真を変更したいと考えています。

私は本当に頭を悩ませていますが、私の考えは、画像を数え、ページの高さを取得し、画像の数をページの高さで割ることでした. そうすれば、フレームの「領域」を定義できますが、それが機能するかどうかはわかりません。

この手法のベスト プラクティスはありますか? それはどのように機能しますか？

これは私がこれまでに持っているコードです - 原始的に単純です: http://jsfiddle.net/mxQd8/1/

4

2 に答える 2

1

マウスホイール プラグインをフィドルにアップロードできないため、直接デモを行うことはできません。必要なコードは、次の行に沿っています。

$(document).ready(function () {
    var container = $('#container'),
    // # of pictures
        nImg = 0;    // active picture
        imgNum = $('#container img').length;

    container.mousewheel(function(event, delta, deltaX, deltaY) {
        if(deltaY>0){
             nImg++;   
        }else{
             nImg--;   
        }
        if(nImg>=imgNum){ nImg = 0; }
        if(nImg<0){ nImg = imgNum-1; }

        $(".animated").each(function(){ $(this).removeClass("show") });
        $(".animated").eq(nImg).addClass("show");
    });
});

基本的に、スクロールの deltaY が負か正か (アップ スクロールまたはダウン スクロール) のみをテストする必要があります。それに基づいて、次または前の画像を表示します。

setTimeoutこれは非常に高速にスクロールします。アニメーションをどれだけ速く動かしたいかによって、スクロールを 250/500 ミリ秒ロックするために を作成する必要があるかもしれません。ループもします - ループさせたくない場合は、少し違うものを書く必要があります。会議に参加する必要がありますが、これで開始できることを願っています。他に何かお手伝いできることがあればお知らせください。

于 2013-03-05T20:00:14.357 に答える
0

私はまさにこの問題のための jQuery プラグインを作成しました: jQuery Transeを見てください。

于 2013-03-05T19:19:36.420 に答える