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

制作我自己的Jquery视差效果

1 个答案: