核心是用mousemove/touchmove监听鼠标/触摸位置，通过getBoundingClientRect归一化坐标并缩放为背景偏移量，结合transform:translate3d实现平滑视差效果，需节流、防默认行为、缓存布局信息并真机测试。
用 mousemove 监听鼠标位置并更新 background-position
核心是监听 mousemove 事件，把鼠标相对于容器的坐标映射为背景图偏移量。不能直接用 clientX/clientY 原始值，否则位移过大、方向反、超出视口——得做归一化处理。
常见错误是直接写 element.style.backgroundPosition = e.clientX + 'px ' + e.clientY + 'px'，结果背景图狂飞，甚至拖出屏幕外。
- 先用
getBoundingClientRect()获取元素可视区域边界，算出鼠标在元素内的相对坐标（x / width和y / height） - 把这组 0–1 的比例值缩放到你想要的偏移范围（比如 ±20px），再取负号：越往右，背景往左移，才产生“跟随”错觉
- 确保元素有明确宽高、
background-size: cover或contain，否则位移不可见或拉伸变形
transform: translate3d() 比 background-position 更平滑
如果背景图是独立 <img> 或伪元素承载，用 transform 替代 background-position 能触发 GPU 加速，滚动/移动更流畅，尤其在低端设备上差异明显。
典型坑是忘记加 will-change: transform 或没设 overflow: hidden，导致位移时边缘露白或闪烁。
立即学习“前端免费学习笔记（深入）”；
- 给背景容器设
position: relative，内部用::before绝对定位一张图 - 监听
mousemove后，计算tx = (midX - e.clientX) * 0.05、ty = (midY - e.clientY) * 0.05（0.05 是灵敏度系数） - 用
element.style.transform = 'translate3d(' + tx + 'px, ' + ty + 'px, 0)'更新 - 记得加
transition: transform 0.1s ease-out防止突兀跳变
移动端要额外处理 touchmove 和防默认行为
纯 mousemove 在 iOS Safari 和 Android Chrome 上对触摸无效，必须同时监听 touchmove；而且默认会触发页面滚动，导致位移卡顿或失效。
错误写法是只绑 mousemove，然后发现手机上完全没反应；或者绑了 touchmove 却没 e.preventDefault()，手指一动页面就上下滑。
- 用
element.addEventListener('touchmove', handler, { passive: false })，passive: false才允许调用preventDefault() - 在 handler 里先
e.preventDefault()，再取e.touches[0].clientX计算位置 - 建议合并 mouse/touch 逻辑：用一个函数统一处理
getEventPos(e)，自动判断事件类型并提取坐标 - 注意 iOS Safari 的
touchstart必须在用户手势后才能监听touchmove，别在页面加载完立刻绑定
性能关键：节流 mousemove 和避免重排
鼠标移动频繁触发（60fps 下每秒 60 次），不节流会卡死主线程，尤其在旧机型上。更隐蔽的问题是反复读写 offsetWidth 或 getBoundingClientRect()，引发强制同步布局（layout thrashing）。
常见表现是鼠标一动页面就掉帧，DevTools Performance 面板能看到大量 Recalculate Style 和 Layout。
- 用
requestAnimationFrame节流：只在下一帧重绘前更新样式，而不是每次事件都改 - 把
getBoundingClientRect()提到事件外，或缓存结果，避免在 handler 里重复调用 - 优先用
transform和opacity这类只触发布局的属性，别碰width、left、top - 测试时关掉浏览器插件，某些广告拦截器会干扰
mousemove事件派发
实际效果取决于灵敏度系数和容器尺寸匹配程度，调太大会飘，太小又不明显；另外务必在真机上验证 touch 行为，模拟器经常不准。
