0

マウスでスクロールする画像を作りました。

画像は、ウィンドウの高さに対するマウスの位置のパーセンテージに基づいた位置までスクロールします。

$(imageContainer).mouseenter(function(e){
    var scrollingTo = ((e.pageY/$(this).height())-.083) * ( $(imageContainer).prop('scrollHeight') - $(imageContainer).height() );
    hijacked = true;
    $(imageContainer).animate({scrollTop:scrollingTo},300,function(){hijacked=false;});
}).mousemove(function(e){
    if(hijacked) return;
    var scrollingTo = ((e.pageY/$(this).height())-.083) * ( $(imageContainer).prop('scrollHeight') - $(imageContainer).height() );
    $(imageContainer).scrollTop(scrollingTo);
});

そう。その行で

$(imageContainer).animate({scrollTop:scrollingTo},300,function(){hijacked=false;});

その scrollingTo を変更したい。アニメーション中に、ユーザーはマウスを動かして scrollingTo 変数を変更できるためです。

4

1 に答える 1

2

よし、アニメーションを動的に変更するハックな方法を一緒に調理することができました。jQuery の内部アニメーション キューについての私の理解はあまりよくありませんが、私の知る限り、アニメーションを停止させる以外に、キューに入れられたアニメーションを変更する方法はありません。とにかく、これはスクロールに適応できるはずの位置を変更する例のキーコードです（フィドル形式）：

$(document).ready(function () {
    var last_update = 0;
    $(document).on("mousemove", function (e) {
        if (Date.now() - last_update > 50) {
            $mover = $("#mover");
            $mover.stop(); 
            $mover.animate({ left: e.pageX, top: e.pageY}, 200, "linear");            
            last_update = Date.now();
        }
    });                    
});

それを機能させるにはいくつかのトリックがありました。それらを調べて、スクロールにどのように適応できると私が信じているかを説明しようと思います。

  • 主なアイデアは、mousemove で前のイベントがキャンセルされ、新しいイベントが開始されるというものです。これでスクロールに変更が必要になるとは思いません。

  • アニメーションの一部の形式は、アニメーションの過程で加速/減速します。絶えず変化するアニメーションでこれを維持することは (少なくともカスタム アニメーション関数を作成しない限り) 難しいため、アニメーションのイージングは​​「線形」に設定されています。

  • 急速に変化するアニメーションには時間がかかるため (特に mousemove のような一般的なイベントの場合)、アニメーションが変化する頻度には制限があります。アニメーションに変更が加えられる前に、最後の 0.05 秒間に変更が加えられていないことが保証されます (これは「last_update」で行われます)。

独自のアニメーション プロパティ (scrollTop) を交換するだけで、探していることができるはずです。

于 2012-09-13T19:22:31.447 に答える