独自のJquery視差効果を作成する

Question

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

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

jsfiddle

Answer 1

それは（少なくともGoogle Chromeの15とIE9で）今、[OK]を動作することを、私はあなたの例を更新している、それはそうです。

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

基本的に、私はmouseenterにmouseoverを変更しmousemoveと同様mouseenterの座標計算を行いました。

---

UPDATE：
加えて、私は、変数の使用を削除しているとmouseenterハンドラが動作している間、私はちょうど、mousemoveイベント（jQuery.unbind）から脱退しています。ここで

は参照用のコードです：あなたは後にしているものを

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); 
     }); 
});