javascript - 如何在jquery中跟随鼠标动画

Question

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

//
$(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);
});
//

但我个人认为这在逻辑上应该可行!来 self 作为网络脚本编写者的观点。然后我的问题是，我怎样才能使这项工作。我希望#follower 尝试以一种动态的滞后感跟随我的鼠标。

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

Answer 1

如何使用 setInterval 和一个称为芝诺悖论的方程:

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

这就是我通常做的方式。

根据要求，我已将代码包含在此答案中。给定一个具有绝对定位的 div:

CSS:

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

HTML:

<div id="follower">Move your mouse</div>

带有 jQ​​uery 的 JS:

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