好的,这对于跟随我的鼠标非常好.
// $(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.那么我的问题是,我该怎么做这个工作.我想要#follower尝试跟随我的鼠标与一种动态的落后感觉.
// $(document).mousemove(function(e){ $("#follower").animate({ top: e.pageY + 'px'; left: e.pageX + 'px'; },800); }); //
解决方法
如何使用setInterval和一个称为zeno的悖论的方程式:
这是我通常做的方式.
根据要求,我在这个答案中包含了代码.给定绝对定位的div:
CSS:
#follower{ position : absolute; background-color : red; color : white; padding : 10px; }
HTML:
<div id="follower">Move your mouse</div>
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);