答案是通过监听mousemove事件并更新元素位置实现鼠标跟随。首先使用addEventListener监听鼠标移动获取坐标，再创建position:fixed的元素，最后在事件中动态设置其left和top值，可选缓动效果通过requestAnimationFrame插值实现。
要实现鼠标跟随效果，核心是监听鼠标移动事件，并实时更新页面元素的位置。这可以通过原生 javaScript 实现，不需要复杂的库或框架。
1. 监听鼠标移动事件
使用 addEventListener 监听 red”>mousemove 事件，该事件在鼠标在页面上移动时触发。
基本语法：
document.addEventListener(‘mousemove’, function(e) {
const x = e.clientX;
const y = e.clientY;
// 使用 x 和 y 坐标做后续操作
});
e.clientX 和 e.clientY 提供鼠标相对于浏览器视口的水平和垂直坐标。
立即学习“前端免费学习笔记（深入）”；
2. 创建跟随鼠标的元素
<div id=”follower” style=”position: fixed; width: 20px; height: 20px; background: red; border-radius: 50%; pointer-events: none; left: 0; top: 0;”></div>
注意设置 position: fixed，使元素相对于视口定位，不受滚动影响。pointer-events: none 可防止它阻挡鼠标事件。
3. 更新元素位置
在 mousemove 事件中，把获取到的鼠标坐标赋给目标元素的位置：
const follower = document.getElementById(‘follower’);
document.addEventListener(‘mousemove’, function(e) {
follower.style.left = e.clientX + ‘px’;
follower.style.top = e.clientY + ‘px’;
});
这样，元素就会实时跟随鼠标移动。
4. 添加平滑跟随效果（可选）
如果希望元素不是瞬间跳转，而是“缓动”跟随，可以使用定时器和位置插值：
const follower = document.getElementById(‘follower’);
let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
document.addEventListener(‘mousemove’, function(e) {
targetX = e.clientX;
targetY = e.clientY;
});
function animate() {
currentX += (targetX – currentX) 0.1;
currentY += (targetY – currentY) 0.1;
follower.style.left = currentX + ‘px’;
follower.style.top = currentY + ‘px’;
requestAnimationFrame(animate);
}
animate();
这种方式会让元素“滑动”到鼠标位置，视觉更柔和。
基本上就这些。通过监听 mousemove 事件，结合 dom 操作更新样式，就能轻松实现鼠标跟随效果。不复杂但容易忽略细节，比如定位方式和事件坐标的理解。