1

ユーザーが最初にマウスをドキュメントの上に置くと、前景レイヤーがマウスカーソルに向かって移動し、マウスカーソルが前景レイヤーの中心に来るようにするjquery視差効果を作成しています。その後、ユーザーがマウス カーソルの周りを移動すると、フォアグラウンド レイヤーがマウス カーソルの反対方向に移動する必要があります。背景レイヤーも反対方向に移動しますが、視差効果を生成する速度は遅くなります。

問題は、イベントを使用してフォアグラウンド レイヤーがマウス カーソルに向かって移動し、mouseoverイベントをトリガーした後、フォアグラウンド レイヤーmousemoveとバックグラウンド レイヤーが別の場所に「ジャンプ」することです。

jsfiddle

4

1 に答える 1

2

私はあなたの例を更新しましたが、現在は問題なく動作しているようです (少なくとも Google Chrome 15 と IE9 では)。

http://jsfiddle.net/jPFAq/10/

基本的にはと同じように座標計算を変更mouseoverして行いました。mouseentermouseentermousemove

更新:
さらに、変数の使用を削除し、ハンドラーの実行中にmousemoveイベント ( jQuery.unbind)のサブスクライブを解除しました。mouseenter

参照用のコードは次のとおりです。

function onmousemovehandler(e){    
    mouse_dx = -(e.pageX);
    mouse_dy = -(e.pageY);
    $('#foreg').css({

        'left': mouse_dx,
        'top': mouse_dy
    });

    mouse_dx = (mouse_dx) / 2;
    mouse_dy = (mouse_dy) / 2;

    $('#backg').css({

        'left': mouse_dx,
        'top': mouse_dy

    });
};

$(document).mouseenter(function(e) {
            $(document).unbind('mousemove', onmousemovehandler);

  mouse_x = -(e.pageX);
  mouse_y = -(e.pageY);

  $('#foreg').animate({
         'left': mouse_x,
         'top': mouse_y
     }, 
     300);
  $('#backg').animate({
         'left': mouse_x/2,
         'top': mouse_y/2
     }, 
     300, 
     function() {           
         $(document).mousemove(onmousemovehandler);
        });
});
于 2011-12-07T11:57:51.143 に答える