核心原理是监听mousemove事件实时获取鼠标坐标，用transform: translate()动态更新fixed或absolute定位元素位置；需节流、禁用pointer-events、处理滚动偏移与移动端touch适配。
鼠标跟随效果的核心原理是什么
关键在于监听 mousemove 事件，实时获取鼠标坐标，再用 transform: translate() 或 left/top 动态更新一个 DOM 元素的位置。不要用 position: fixed 配合 clientX/clientY 直接赋值——它在页面滚动时会错位；必须基于视口坐标做转换，或统一用 getBoundingClientRect() 对齐。
如何避免卡顿和抖动
原生实现中，高频 mousemove 会触发大量重排重绘，直接写 element.style.left = e.clientX + 'px' 很容易掉帧。
mousemove 会触发大量重排重绘，直接写 element.style.left = e.clientX + 'px' 很容易掉帧。
- 优先使用 transform: translate()，它走 GPU 合成层，不触发 layout
- 必须加节流（throttle），间隔建议设为 16ms（≈60fps）或用 requestAnimationFrame
- 不要每帧都读取 offsetWidth/offsetHeight 等布局属性，提前缓存尺寸
- 跟随元素的 pointer-events 设为 none，防止遮挡下层交互
let follower = document.getElementById('follower');
let isAnimating = false;
<p>document.addEventListener('mousemove', (e) => {
if (!isAnimating) {
requestAnimationFrame(() => {
follower.style.transform = <code>translate(${e.clientX}px, ${e.clientY}px)</code>;
isAnimating = false;
});
isAnimating = true;
}
});</p>
CSS 中哪些样式会影响跟随行为transform 的锚点、父容器的 overflow、contain 属性都会干扰定位表现。
- 跟随元素默认以左上角为基准，若想居中对齐鼠标，需提前减去自身宽高的一半：translate(${e.clientX - w/2}px, ${e.clientY - h/2}px)
- 父级有 overflow: hidden 且未设置 position: relative，可能裁剪跟随元素
- 若父容器用了 contain: layout paint，某些浏览器会限制 transform 的渲染范围
- 不要给跟随元素设 transition，除非你明确想要缓动效果；否则会造成延迟感
移动端是否能用同一套逻辑
不能直接复用。移动端没有稳定连续的 mousemove，得监听 touchmove，且坐标要从 e.touches[0] 取。
- clientX/clientY 在 touch 事件里不可靠，优先用 e.touches[0].clientX
- iOS Safari 中，touchmove 默认会触发页面滚动，需加 e.preventDefault()（但注意这会禁用原生滚动）
- 移动端高 DPR 屏幕下，clientX 是 CSS 像素，而 transform 不受影响，无需额外缩放
- 如果同时支持鼠标和触摸，建议用 pointermove 事件替代，但要注意 IE 和旧版 Safari 不支持
最易被忽略的是滚动兼容性：只监听 mousemove 并用 clientX/clientY，在页面滚动后，跟随元素会“粘”在初始视口位置不动。真正在生产环境用，必须监听 scroll 事件并重新校准，或者改用 getBoundingClientRect() + pageX/pageY 组合计算绝对偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
