Javascript 制作我自己的Jquery视差效果

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

问题是，在使用

mouseover

事件将前景层移向鼠标光标并触发

mousemove

事件后，前景层和背景层将“跳转”到另一个位置

---

我已经更新了您的示例，它现在似乎运行正常（至少在谷歌Chrome 15和IE9中是如此）

基本上，我已将

mouseover

更改为

mouseenter

，并在

mouseenter

中进行了与

mousemove

相同的坐标计算

---

更新：
此外，我已经删除了变量的使用，我只是在运行

mouseenter

处理程序时取消订阅

mousemove

事件（

jQuery.unbind

）

以下是代码供参考：

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

---

我不太清楚你想要什么，但我修改了你的小提琴，用

.animate

而不是

.css

。现在没有跳跃，但小部件感觉像是一个注定要失败的蝴蝶鱼缸。您可能希望在此设置一些延迟，以阻止浏览器排队等待所有鼠标活动。如果这是你想要的，那么我会发布一个答案。我已经试过了。只是反应不太灵敏。我想保持我现在的效果，但是没有传送蝴蝶。