当前位置：首页 > 文章列表 > 文章 > 前端 > JS鼠标跟随特效制作教程

JS鼠标跟随特效制作教程

2025-11-15 11:57:52 0浏览收藏

**JS鼠标跟随效果制作教程：打造炫酷网页互动体验** 想为你的网页增添动感和趣味吗？本教程将带你一步步掌握JS鼠标跟随效果的制作方法。从监听`mousemove`事件获取鼠标坐标，到实时更新元素位置，实现基础的单元素跟随。更进一步，我们将学习如何创建多个跟随元素，利用缓动算法和`requestAnimationFrame`实现平滑的轨迹动画，打造更具吸引力的视觉效果。本文还分享了优化建议和注意事项，助你避免常见问题，轻松掌握DOM操作和动画逻辑，为你的网站带来更丰富的互动体验。无论你是前端新手还是有一定经验的开发者，都能从中受益。

实现鼠标跟随效果需监听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操作与动画逻辑。

js脚本如何制作鼠标跟随效果_js鼠标跟随动画脚本编写教程

要实现鼠标跟随效果，核心思路是监听鼠标移动事件，实时获取鼠标位置，并将目标元素的位置同步更新。这个过程不复杂，适合初学者掌握 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 =&gt; {
  // 使用缓动算法平滑移动
  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();

技巧：