用 pointer-events: none 配合 mousemove 事件可实现图片跟随鼠标，核心是 fixed 定位并实时更新 left/top 值；需优化节流、缓动与显隐逻辑，并注意尺寸、z-index 及移动端适配。
用 CSS 的 pointer-events: none 配合 JavaScript 监听鼠标移动事件，就能让图片“粘”在鼠标指针上平滑跟随。核心是把图片定位为固定（position: fixed），再实时更新它的 left 和 top 值为鼠标坐标。
基础实现：一张图跟随鼠标
HTML 中放一个 <img> 标签，初始隐藏（display: none），并设为固定定位、无鼠标事件干扰：
@@##@@
JavaScript 监听 mousemove，获取事件的 clientX / clientY，赋给图片位置（可加偏移微调）：
const img = document.getElementById('followImg');
document.addEventListener('mousemove', (e) => {
img.style.left = (e.clientX + 10) + 'px';
img.style.top = (e.clientY + 10) + 'px';
img.style.display = 'block';
});
优化体验：避免抖动与延迟
直接赋值可能有卡顿或跳变，推荐加简单缓动或节流：
- 用
requestAnimationFrame替代直接设置，更顺滑 - 记录上一帧坐标，只在变化明显时更新（如偏移 > 2px）
- 鼠标移入页面才显示，移出时隐藏（监听
mouseenter/mouseleave）
进阶技巧：支持多图/自定义光标
如果想替换系统光标（如禁用默认箭头），可对 body 设置 cursor: none，再用图片模拟；若需多个不同状态的跟随图（悬停按钮时换图标），可用 class 切换或动态改 src，配合事件委托判断目标元素。
注意事项
- 图片尺寸建议小而清晰（如 24×24 或 32×32 px），避免拖影感
- 移动端不触发
mousemove，需额外处理touchmove - Z-index 要足够高，确保不被其他元素遮挡
- 若页面有滚动，
clientX/Y已是视口坐标，无需额外减 scrollTop
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
