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

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

星夢妙者

发布： 2025-11-16 21:12:06

原创

370人浏览过

<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>

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>

登录后复制

说明：

标小兔AI写标书

一款专业的标书AI代写平台，提供专业AI标书代写服务，安全、稳定、速度快，可满足各类招投标需求，标小兔，写标书，快如兔。

查看详情

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>

技巧：