17370845950

本文介绍一种通过隐藏原生光标并使用 css `translate` 驱动父容器位移的方式，让多个“假光标”完美同步鼠标运动，彻底解决传统 `mousemove` + `offsetleft/top` 方案存在的视觉延迟问题。

在开发类似“躲猫猫鼠标”类互动游戏时，一个常见痛点是：当试图用多个 元素模拟随鼠标移动的“假光标”时，若采用监听 mousemove 事件、逐帧计算位移并更新 style.left/top 的方式（如 img.style.left = img.offsetLeft + deltaX + 'px'），会因 DOM 读写强制重排（Layout Thrashing）、样式计算开销及 JavaScript 执行延迟，导致视觉上明显滞后——尤其在快速移动或高刷新率屏幕上，“假光标”仿佛被拖着走，极易被玩家识破。

根本原因在于：

• offsetLeft / offsetTop 是同步布局读取操作，每次调用都会触发浏览器强制同步计算当前布局（reflow），性能极差；
• 多个元素独立更新 left/top，无法被 GPU 批量加速；
• mousemove 事件本身存在节流（通常 60Hz 以下），且事件处理逻辑越重，丢帧越严重。

✅ 最优解：放弃逐元素定位，改用「单层容器 + transform」驱动

核心思路是：

1. 隐藏真实光标：body { cursor: none; }；
2. 创建统一控制层：用一个 #pointers 容器承载所有假光标，并将其设为 position: absolute; width/height: 100%；
3. 仅移动容器本身：监听 pointermove（比 mousemove 更现代、兼容性更好），将鼠标相对视口中心的归一化偏移量（xCenter, yCenter）映射为 transform: translate() 值；
4. 内部元素绝对定位：所有 .pointer 子元素使用 position: absolute + 百分比定位（如 left: 37%; top: 62%;），它们相对于 #pointers 的位移是静态的，因此容器平移时，所有子元素自动以相同速度、相同方向整体位移——零延迟、零重排、GPU 加速。

以下是关键实现代码：

const elPointers = document.querySelector("#pointers");
const elBody = document.body;

const movePointers = (evt) => {
  // 归一化：将 clientX/Y 映射为 [-0.5, +0.5] 区间（中心为 0）
  const xCenter = evt.clientX / elBody.offsetWidth - 0.5;
  const yCenter = evt.clientY / elBody.offsetHeight - 0.5;
  // 使用 translate 实现硬件加速位移
  elPointers.style.translate = `${xCenter * 100}% ${yCenter * 100}%`;
};

elBody.addEventListener("pointermove", movePointers);

对应 CSS 需确保：

#pointers {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 关键！允许鼠标穿透到下方按钮 */
  /* 主光标可设为背景图，居中显示 */
  background: url("cursor.png") 50% 50% no-repeat;
  background-size: 25px 32px;
}
.pointer {
  position: absolute;
  width: 25px;
  height: 32px;
  background: url("cursor.png");
  /* 随机分布于容器内 */
}

⚠️ 注意事项与进阶建议：

• 使用 pointermove 替代 mousemove：更广的设备支持（含触控笔、触摸屏），且事件流更稳定；
• translate 比 left/top 性能高一个数量级：它不触发 Layout 和 Paint，仅影响 Composite 阶段；
• 若需支持旧浏览器（如 IE），可用 transform: translate(...) 回退，但务必添加 will-change: transform 提示浏览器提前优化；
• 动态生成假光标时，推荐批量操作 DOM（如先构建 DocumentFragment 再一次性 append），避免频繁重排；
• 为增强迷惑性，可对部分 .pointer 添加轻微 scale(0.9) 或 opacity: 0.8，并配合随机旋转（transform: rotate(5deg)），但注意旋转不影响主容器 translate 的同步性。

最终效果：无论鼠标如何疾驰，所有假光标均如影随形，与真实指针轨迹完全一致——这才是真正“难找”的鼠标游戏体验。