放大镜效果的核心原理是通过遮罩层移动同步控制大图背景位移，本质是平移而非缩放；关键在按缩放比计算background-position偏移值，并用requestAnimationFrame节流、保留小数精度、处理边界与移动端适配。
放大镜效果的核心原理是什么
本质是用一个 absolute 定位的遮罩层（“镜片”）在小图上移动，同时同步控制大图的 background-position 偏移，让大图对应区域“露出来”。不是缩放图片，而是平移背景——这点容易误解，导致用 transform: scale() 白忙活。
- 小图容器需设
position: relative，为镜片提供定位上下文 - 镜片本身是
absolute的圆形/方形元素，宽高固定（如100px），带半透底色和边框 - 大图藏在另一个容器里，作为
background-image，尺寸远大于容器（比如800px × 800px背景图，容器仅400px × 400px） - 鼠标在小图上移动时，监听
mousemove，算出镜片中心坐标，再按比例映射到大图的背景偏移值
怎么计算 background-position 的偏移值
关键在缩放比：大图尺寸 / 小图尺寸。假设小图 300px × 300px，大图 900px × 900px，缩放比就是 3。
- 镜片左上角相对于小图容器左上角的坐标是
left、top - 镜片中心点坐标 =
left + 镜片宽度/2、top + 镜片高度/2 - 对应的大图背景 X 偏移 =
-(centerX * 缩放比 - 大图容器宽度/2) - Y 同理。负号是因为
background-position向右/下移动时，值是负的（背景图往左/上走）
// 示例：小图 300×300，大图容器 400×400，大图背景 900×900
const scale = 900 / 300; // 3
const offsetX = -(mouseX * scale - 400 / 2);
const offsetY = -(mouseY * scale - 400 / 2);
elBig.style.backgroundPosition = `${offsetX}px ${offsetY}px`;
注意：mouseX、mouseY 是相对于小图容器的坐标，得用 getBoundingClientRect() 减去容器位置来算，别直接用 event.clientX。
为什么镜片经常“抖动”或“跟不上鼠标”
根本原因是镜片和背景偏移没做防抖或节流，高频 mousemove 导致样式反复重排重绘；其次是坐标计算用了四舍五入或整数截断，破坏了像素级对齐。
立即学习“前端免费学习笔记（深入）”；
- 必须加
requestAnimationFrame节流，不要在mousemove里直接改样式 - 计算出的
offsetX、offsetY别用Math.round()，保留小数（现代浏览器支持 sub-pixel 渲染） - 镜片的
left和top也要用浮点值设置，避免强制取整跳变 - 确保小图容器没有
border或padding干扰坐标计算——如有，必须从getBoundingClientRect()结果中减去
移动端适配要注意什么
手指触摸区域远大于鼠标指针，镜片尺寸得加大（比如 150px），且要处理 touchstart/touchmove 事件。
-
touchmove默认会触发页面滚动，得加{ passive: false }并在回调里调用event.preventDefault() - 单个 touch 可能有多个
touches，只取touches[0] - 移动端没有 hover，镜片默认隐藏，首次 touch 才显示并绑定 move 事件
- iOS Safari 对
background-position小数偏移渲染不稳定，可加will-change: background-position提前提示合成
实际用下来，最易忽略的是容器边界检测——鼠标快移到小图边缘时，镜片不能移出容器，否则背景偏移会超限，大图出现空白。这个裁剪逻辑得手写，CSS 没有自动兜底。
