如何在jquery中跟踪鼠标动画

好的，这对于跟随我的鼠标非常合适。

// $(document).mousemove(function(e){ $("#follower").css({ 'top': e.pageY + 'px'; 'left': e.pageX + 'px'; }); }); // 

这非常适合将鼠标设置为点击点

 // $(document).click(function(e){ $("#follower").animate({ top: e.pageY + 'px'; left: e.pageX + 'px'; }, 800); }); // 

但我个人觉得这在逻辑上应该工作！ 来自我的观点作为webscripter。 Amd那么我的问题是，我怎样才能做到这一点。 我希望#follower尝试用一种动态的落后感觉跟随我的鼠标。

 // $(document).mousemove(function(e){ $("#follower").animate({ top: e.pageY + 'px'; left: e.pageX + 'px'; }, 800); }); // 

Answer 1

如何使用setInterval和一个名为zeno’s paradox的等式：

http://jsfiddle.net/88526/1/

这就是我通常这样做的方式。

根据要求，我已将代码包含在此答案中。 鉴于具有绝对定位的div：

CSS：

 #follower{ position : absolute; background-color : red; color : white; padding : 10px; } 

HTML：

 
Move your mouse 

JS w / jQuery：

 var mouseX = 0, mouseY = 0; $(document).mousemove(function(e){ mouseX = e.pageX; mouseY = e.pageY; }); // cache the selector var follower = $("#follower"); var xp = 0, yp = 0; var loop = setInterval(function(){ // change 12 to alter damping, higher is slower xp += (mouseX - xp) / 12; yp += (mouseY - yp) / 12; follower.css({left:xp, top:yp}); }, 30);