javascript - 制作我自己的 Jquery 视差效果

Question

我正在制作一个 jquery 视差效果，当用户第一次将鼠标悬停在文档上时，前景层将向鼠标光标移动，这样鼠标光标将位于前景层的中心上方。之后，当用户围绕鼠标光标移动时，前景层应该向与鼠标光标相反的方向移动；背景层也会向相反方向移动，但速度较慢，产生视差效果。

问题是前景层使用mouseover事件向鼠标光标移动后，我触发了mousemove事件，前景层和背景层会“跳跃”到另一个位置。

jsfiddle

Answer 1

我已经更新了您的示例，现在看来它可以正常工作(至少在 Google Chrome 15 和 IE9 中是这样)。

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

基本上，我已将 mouseover 更改为 mouseenter 并使 mouseenter 中的坐标计算与 mousemove 中的坐标计算相同.

---

更新:
此外，我删除了对变量的使用，我只是取消订阅 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);
        });
});