<p>实现鼠标跟随效果需监听mousemove事件，获取鼠标坐标并同步更新元素位置。1. 使用addEventListener监听鼠标移动，通过clientX、clientY获取坐标，结合position:fixed和style.left/top实时定位元素。2. 示例中创建红色小圆点，利用transform居中对齐鼠标，并设置pointer-events:none避免遮挡。3. 多元素跟随通过创建多个div，使用requestAnimationFrame循环更新位置，采用缓动算法(follow.x += (x - follow.x) * 0.3)实现平滑轨迹动画。4. 注意事项包括确保DOM正确插入、减少重绘、及时解绑事件，移动端需适配touchmove，可结合CSS过渡增强视觉效果。核心是事件驱动与位置同步，掌握DOM操作与动画逻辑。</p>
要实现鼠标跟随效果，核心思路是监听鼠标移动事件，实时获取鼠标位置，并将目标元素的位置同步更新。这个过程不复杂，适合初学者掌握 DOM 操作和事件绑定的基本用法。
1. 基础鼠标跟随原理
JavaScript 通过 mousemove 事件监听鼠标在页面上的移动。每次触发时，可以获取鼠标的坐标（clientX 和 clientY），然后设置某个元素的 top 和 left 样式属性，使其跟随鼠标。
关键点：
- 使用 addEventListener('mousemove', ...) 监听鼠标移动
- 获取 e.clientX 和 e.clientY 得到视口坐标
- 将目标元素的定位设为 position: absolute 或 fixed
- 动态修改元素的 style.left 和 style.top
2. 简单示例：小圆点跟随鼠标
下面是一个基础的实现代码：
<style>
.follower {
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
position: fixed;
transform: translate(-50%, -50%);
pointer-events: none;
}
</style>
<p><div class="follower"></div></p><p><script>
const follower = document.querySelector('.follower');</p><p>document.addEventListener('mousemove', (e) => {
follower.style.left = e.clientX + 'px';
follower.style.top = e.clientY + 'px';
});
</script></p>说明：
- position: fixed 让元素相对于视口定位
- transform: translate(-50%, -50%) 使元素中心对准鼠标位置
- pointer-events: none 防止该元素阻挡鼠标事件
3. 多元素跟随形成动画轨迹
可以创建多个小元素，让它们依次延迟跟随鼠标，形成“尾巴”动画效果。
<script>
const followers = [];
const count = 6;
<p>// 创建多个跟随元素
for (let i = 0; i < count; i++) {
const el = document.createElement('div');
el.classList.add('follower');
document.body.appendChild(el);
followers.push({
el,
x: 0,
y: 0
});
}</p><p>let currentX = 0;
let currentY = 0;</p><p>// 主跟随逻辑
document.addEventListener('mousemove', (e) => {
currentX = e.clientX;
currentY = e.clientY;
});</p><p>// 动画循环，逐级延迟更新位置
function animate() {
let x = currentX;
let y = currentY;</p><pre class='brush:php;toolbar:false;'>followers.forEach(follow => {
// 使用缓动算法平滑移动
follow.x += (x - follow.x) * 0.3;
follow.y += (y - follow.y) * 0.3;
follow.el.style.left = follow.x + 'px';
follow.el.style.top = follow.y + 'px';
x = follow.x;
y = follow.y;
});
requestAnimationFrame(animate);}
animate(); </script>
技巧：
- 使用 requestAnimationFrame 实现流畅动画
- 每个元素基于前一个的位置更新，形成链式跟随
- 通过 (target - current) * 系数 实现缓动效果，更自然
4. 注意事项与优化建议
实际使用中需注意以下几点：
- 确保跟随元素已正确插入 DOM 并有样式定义
- 避免频繁操作 DOM，尽量只修改 style 属性
- 在不需要时移除事件监听器，防止内存泄漏
- 移动端需监听 touchmove 事件替代 mousemove
- 可结合 CSS transition 实现更丰富的入场/出场动画
基本上就这些。从单点跟随到轨迹动画，关键是理解事件驱动与位置同步的逻辑。不复杂但容易忽略细节，比如定位方式和指针事件处理。
