1

わかりました、これを説明しようと思いますが、それはちょっと難しいです。このようなHTMLがあるとしましょう。

<div id="wrapper">
    <div id="scroll">
        <!--content-->
    </div>
</div>

これで、＃wrapperには設定された高さ（たとえば500px）があり、＃scrollはより長い高さ（たとえば3000px）になります。

var hoverInterval, yPos, offset, objHeight

$("#wrapper").mousemove(function(e){
    //when the mouse moves in #wrapper, find the height of the object
    //and the relative position of the mouse within the object.
    objHeight = this.offsetHeight
    yPos = e.pageY - this.offsetTop;
});
$("#wrapper").hover( //when the user hovers w/i #wrapper...
    function(){
        hoverInterval = setInterval(function(){
            factor = (100*yPos)/objHeight //gives a range from 0-100
            move = ( -3+( ( Math.pow(factor-50,2))/56))/8
                      /*this provides a bell curve, so that as 
                       *the user hovers closer to the extremes,
                       */#scroll will scroll faster up and down.
                if ( move > 0 ) { //prevents movement when in the middle
                if (yPos <= objHeight*.5 ) {
                    $("#photos").animate(
                          {"top":"+="+move+"px"},"slow","easeOutExpo")
                          .stop("true","true")
                }
                else if (yPos >= objHeight*.5){
                    $("#photos").animate(
                          {"top": "-="+move+"px"},"slow","easeOutExpo")
                          .stop("true","true")
                }
            }
        },10); //setInterval's timeout
    },
    function(){ //and stop at mouse off.
        clearInterval(hoverInterval)
    }
);

これが現在行うことは、ユーザーが#wrapperで上または下にホバリングすると、＃scrollがより速くスクロールし、中央にデッドエリアがあります。しかし、ユーザーが#wrapperからスクロールオフすると、突然停止します。ユーザーが#wrapperにカーソルを合わせるのをやめたときに、これを適切に停止させる方法についてのアイデアはありますか？
コードの最適化も歓迎します。

4

1 に答える 1

0

jQuery イベント をチェックしてくださいmouseout。このようなイベントをラッパーにアタッチし、既に設定した速度変数を使用してそこからスムーズにアニメーションを停止することをお勧めします。

http://api.jquery.com/mouseout/

于 2011-04-23T22:15:08.817 に答える