製作我自己的JQuery視差效果

Question

我正在製作一個jQuery視差效果，當用戶首次將鼠標懸停在文檔上時，前景層將朝鼠標光標移動，使得鼠標光標將位於前景層。之後，當用戶在鼠標光標周圍移動時，前景層應該移動鼠標光標的相反方向;背景層也會沿相反方向移動，但速度較慢以產生視差效果。

問題是，前景層使用mouseover事件向着鼠標光標移動並觸發mousemove事件後，前景層和背景層將「跳轉」到另一個位置。

jsfiddle

Answer 1

我已經更新了你的榜樣，它似乎，它現在工作的很好（至少在谷歌瀏覽器15和IE9）。

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

基本上，我已經改變mouseover到mouseenter和mouseenter相同mousemove作出的座標計算。

---

UPDATE：
此外，我已刪除了使用可變的，我剛剛從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); 
     }); 
});