jQuery平滑鼠标跟踪

时间:2010-08-12 13:08:07

标签: javascript jquery jquery-ui

我的对象使用onmousemove事件跟踪鼠标。但我想说顺利。我相信这在jQuery中并不难,但我找不到任何非常好的资源。

我的一个想法是简单地使用animate函数并计算我想要移动的偏移量。然后,如果鼠标在动画完成之前再次移动,我将使用stop函数来停止动画。我会重新计算我的目的地然后再去。这似乎有点黑客,我也想象它会有点生涩。我相信必须有更好的方法。任何想法?

修改
对不起,我没有把问题弄清楚。我让对象实时跟踪鼠标,使其与我的鼠标完全相同。问题在于我希望它能够顺畅而且落后于加速效果,如下面提到的Andy Lin。我只是有点迷失如何实际实现这一点。

2 个答案:

答案 0 :(得分:1)

当您使用onmousemove时,您不需要让对象在每次调用时都改变其行为。

e.g。您可以添加一个计时器,表示在一段时间内,该对象不会响应mousemove并将跟随其原始路径,并在超时或鼠标移动停止时,根据目标移动。

另外,您可以使用动画设置模拟加速和减速效果。

答案 1 :(得分:1)

我担心,没有比动画更好的方法了。如果你添加一个平滑函数,那么你只需要做与animate相同的事情。请确保不要将动画排队,否则它们会显得很奇怪。我得到了很好的结果:

var obj = $('<div style="width:50px;height:50px;background:red;position:absolute"></div>');

obj.appendTo(document.body);

$(document).bind('mousemove',function(ev){
 obj.animate({top:ev.pageY,left:ev.pageX},{queue:false,duration:200,easing:'linear'})});