1

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

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

jsfiddle

4

1 回答 1

2

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

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

基本上，我已更改mouseover为并进行了与中相同mouseenter的坐标计算。mouseentermousemove

更新：
此外，我已经删除了变量的使用，并且我只是在处理程序运行时取消订阅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 回答