实现假鼠标光标随鼠标无延迟实时移动的问题求助

你的问题出在通过增量累加更新假光标位置的方式上：每次mousemove事件触发时，你用假光标当前的offsetLeft/offsetTop加上鼠标移动增量来更新位置。这种方式依赖连续的mousemove事件触发，一旦浏览器事件队列有延迟、或者事件丢失，假光标就会逐渐跟不上真实鼠标的移动节奏，产生滞后感。

优化方案：直接同步鼠标当前绝对位置 #

放弃增量累加，每次mousemove时直接将假光标定位到鼠标的当前坐标（可根据光标图片的大小调整偏移，让光标图片的中心和真实鼠标对齐）。这种方式能让假光标和真实鼠标完全同步，不会出现滞后。

修改后的代码 #

const images = document.getElementsByTagName('img');
// 假设光标图片宽高为32px，根据实际尺寸调整
const cursorWidth = 32;
const cursorHeight = 32;

document.addEventListener('mouseleave', () => {
  // 鼠标移出屏幕时隐藏假光标，可选
  for (const img of images) {
    img.style.display = 'none';
  }
});

document.addEventListener('mousemove', (ev) => {
  // 直接定位到鼠标当前位置，减去宽高一半让中心对齐
  const targetLeft = ev.x - cursorWidth / 2;
  const targetTop = ev.y - cursorHeight / 2;
  for (const img of images) {
    img.style.display = 'block';
    img.style.left = `${targetLeft}px`;
    img.style.top = `${targetTop}px`;
  }
});

额外优化建议 #

1. 给假光标图片添加pointer-events: none样式，避免假光标遮挡真实鼠标的点击事件（比如游戏里的按钮）：

img {
  position: absolute;
  pointer-events: none;
  /* 其他自定义样式 */
}

2. 如果需要保留“假光标和真实鼠标有微小偏移”的迷惑性，可以在设置位置时添加随机小偏移：

const randomOffsetX = Math.random() * 10 - 5; // -5到5px的随机偏移
const randomOffsetY = Math.random() * 10 - 5;
const targetLeft = ev.x - cursorWidth / 2 + randomOffsetX;
const targetTop = ev.y - cursorHeight / 2 + randomOffsetY;

内容的提问来源于stack exchange，提问作者kiransbaliga