试图让一个div“跟随”鼠标移动光标，但有一个延迟

我想创建类似于旧鼠标轨迹的效果，其中div被延迟但跟随光标。

通过使用set interval将动画触发到光标的坐标，我已经相当接近了。

$("body").mousemove(function (e) { if (enableHandler) { handleMouseMove(e); enableHandler = false; } }); timer = window.setInterval(function(){ enableHandler = true; }, 250); function handleMouseMove(e) { var x = e.pageX, y = e.pageY; $("#cube").animate({ left: x, top: y }, 200); } 

的jsfiddle

现在仍然存在两个问题：

1. ‘追逐’div是非常跳跃的（因为需要使用设置间隔）

2. 如果在触发动画之前鼠标移动停止，则div将保留在远离光标的位置。

Answer 1

我的做法略有不同。 而不是使用setInterval （甚至setTimeout ） – 我只是让动画需要x毫秒才能完成。 动画越长，下面的div似乎就越不敏感。

我注意到的唯一问题是，如果鼠标移动很多，它会被备份。

 $(document).ready(function () { $("body").mousemove(function (e) { handleMouseMove(e); }); function handleMouseMove(event) { var x = event.pageX; var y = event.pageY; $("#cube").animate({ left: x, top: y }, 1); } }); 

https://jsfiddle.net/jvmravoz/1/

Answer 2

删除SetInterval并添加$（“＃cube”）。stop（）; 停止基于旧（x，y）的旧动画，这样你就可以开始一个新的“更快”的动画。

 $(document).ready(function() { $("body").mousemove(function (e) { $("#cube").stop(); handleMouseMove(e); }); function handleMouseMove(event) { var x = event.pageX, y = event.pageY; $("#cube").animate({ left: x, top: y }, 50); } }); 

工作示例https://jsfiddle.net/jabnxgp7/

Answer 3

这是一个可能更多地模仿鼠标轨迹的解决方案，因为它只记住最后100个位置并丢弃旧的那些设置鼠标轨迹的长度。

https://jsfiddle.net/acmvhgzm/6/

 $(document).ready(function() { var pos = new Array(); $("body").mousemove(function (e) { handleMouseMove(e); }); timer = window.setInterval(function() { if (pos.length > 0) { $('#cube').animate(pos.shift(),15); } }, 20); function handleMouseMove(event) { var x = event.pageX, y = event.pageY; if (pos.length = 100) { pos.shift(); } pos.push({'left':x, 'top':y}); } }); 

Answer 4

尝试使用.css() ， css transition删除setInterval

 $(document).ready(function () { var cube = $("#cube"); $("body").mousemove(function (e) { handleMouseMove(e); }); function handleMouseMove(event) { var x = event.pageX, y = event.pageY; cube.css({ left: x + cube.width() / 2 + "px", top: y + cube.height() / 2 + "px" }).parents("body").mousemove() } }); 

 body { overflow:hidden; position:absolute; height:100%; width:100%; background:#efefef; } #cube { height:50px; width:50px; margin-top:-25px; margin-left:-25px; background:red; position:absolute; top:50%; left:50%; transition:all 1.5s ease-in-out; }