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

我正在制作一个jquery视差效果，当用户第一次将鼠标悬停在文档上时，前景层将朝着鼠标光标移动，因此鼠标光标将在前景层的中心上方。然后，当用户在鼠标光标周围移动时，前景层应与鼠标光标相反的方向移动；背景层也将沿相反方向移动，但速度较慢，以产生视差效果。

问题在于，使用mouseover事件将前景层移向鼠标光标并且触发mousemove事件后，前景层和背景层将“跳转”到另一个位置。

jsfiddle

最佳答案

我已经更新了您的示例，看来现在可以正常运行（至少在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);
        });
});