如何实现 div 元素实时精准跟随鼠标移动（零延迟方案）

通过隐藏原生光标并用 css `translate` 驱动容器位移，可彻底消除 mousemove 事件带来的累积延迟，让假光标与鼠标指针完全同步。

在网页交互游戏中，实现“假光标”精准跟随真实鼠标是一个常见但易被忽视性能细节的需求。你可能已经尝试过监听 mousemove 事件、记录坐标差值并逐个更新元素 left/top 样式——但这种方法天然存在视觉延迟：每次事件触发需经历事件调度、JS 执行、样式计算、布局重排、绘制合成等多个阶段，尤其在快速移动或高刷新率屏幕上，假光标会明显滞后甚至“拖影”。

根本原因在于：offsetLeft/offsetTop 是读取布局信息的强制同步操作（Layout Thrashing），频繁读写会导致浏览器反复回流；而逐个更新多个 DOM 元素的 style.left/top 更加剧了渲染压力。

✅ 正确解法是「以静制动 + 硬件加速」：

1. 隐藏原生光标：全局设置 cursor: none，消除视觉干扰；
2. 统一驱动容器：将所有假光标放入一个绝对定位的父容器（如 #pointers），仅对该容器应用 transform: translate()；
3. 使用 pointermove 替代 mousemove：更高效、兼容性更好，且支持触控设备；
4. 基于视口比例计算偏移量，避免像素级精度丢失和边界跳变。

以下是核心实现逻辑（已优化为高性能方案）：

// 获取元素的简洁封装
const el = (sel) => document.querySelector(sel);

// 鼠标移动时，仅平移整个 #pointers 容器
const movePointers = (evt) => {
  const { clientX, clientY, target } = evt;
  const body = document.body;
  const xPercent = (clientX / body.offsetWidth - 0.5) * 100;
  const yPercent = (clientY / body.offsetHeight - 0.5) * 100;
  el("#pointers").style.translate = `${xPercent}% ${yPercent}%`;
};

// 绑定事件（推荐 pointermove，更可靠）
document.body.addEventListener("pointermove", movePointers);

对应关键 CSS（务必启用硬件加速）：

* { cursor: none; } /* 全局隐藏系统光标 */

body {
  height: 100dvh;
  overflow: hidden;
  margin: 0;
}

#pointers {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 主光标作为背景图居中显示（自动跟随 translate） */
  background: url("cursor.png") 50% 50% no-repeat;
  background-size: 24px 24px;
  pointer-events: none; /* 确保点击穿透到底层按钮 */
  /* 启用 GPU 加速 */
  will-change: transform;
}

? 进阶提示：

• 所有“假光标”（即 .pointer 子元素）应使用 position: absolute + 百分比随机定位（如 left: 37%; top: 62%;），它们会随父容器整体平移，无需单独 JS 控制；
• 避免在 pointermove 中执行 DOM 查询、getBoundingClientRect() 或任何布局读取操作；
• 若需更高精度（如亚像素对齐），可结合 requestAnimationFrame 做一次节流平滑，但本例中直接绑定 pointermove 已足够流畅；
• 注意：translate 的单位必须是 % 或 px，百分比值基于容器自身尺寸，因此 50% 恒表示中心点，完美匹配光标锚点。

最终效果：无论鼠标如何疾速划过屏幕，所有假光标均如影随形、毫秒级响应——这才是真正意义上的「实时无延迟跟随」。