纯css无法实现真正可用的图片放大镜效果，核心需js处理坐标映射、状态维持与边界校验；必须用position:relative+absolute确保遮罩层正确定位，注意transform、overflow:hidden与border-radius兼容性问题，移动端需节流touch事件并手动计算相对坐标。
纯 CSS 无法实现真正可用的“图片放大镜预览效果”——:hover 和 :active 都不能维持点击或悬停后的状态，更无法根据鼠标坐标动态计算放大区域。所谓“CSS 定位实现”，实际是指用 CSS 控制视觉层（遮罩、背景偏移、定位上下文），但核心坐标映射和状态维持必须靠 JS。
为什么 position: relative + absolute 是必需的
放大镜遮罩层（.magnifier）必须相对于图片容器定位，否则它会脱离上下文漂移到 body 左上角。容器不设 position: relative，top/left 就是按整个视口算的，一动就错。
- 容器若用了
transform（比如scale(0.95)），也会干扰getBoundingClientRect()的返回值，此时需额外补偿 - 移动端 Safari 对
position: sticky或嵌套transform容器内的absolute元素渲染不稳定，建议只用relative+absolute - 不要给容器设
overflow: hidden同时又加border-radius—— 某些安卓 WebView 会裁掉圆角内的遮罩
background-position 偏移怎么算才不偏
关键不是“鼠标在哪”，而是“鼠标在容器内距左/上多少像素”，再乘以缩放比，最后取负值赋给 background-position。直接用 e.clientX 必偏，因为没扣容器自身的 border 和 padding。
- 正确做法：先调
container.getBoundingClientRect()，再减去container.offsetLeft和container.offsetTop（仅当无transform时可靠） - 更稳写法：用
event.offsetX/event.offsetY（Chrome/Firefox 支持），IE/旧 Edge 需 fallback 到getBoundingClientRect()手动算 - 缩放比 = 大图自然宽 / 小图容器宽，不是大图宽 / 图片元素宽 —— 因为图片可能被
object-fit: cover裁剪，真实参与映射的是容器尺寸
移动端 touch 事件怎么接住不丢
iOS Safari 的 touchmove 默认会触发页面滚动，且 event.touches[0] 的坐标是相对于视口的，不是容器。不处理这两点，放大镜在手机上就卡死或乱飘。
- 必须在
touchstart和touchmove中调e.preventDefault()，但只对目标容器生效，别全局禁用 - 用
e.touches[0].clientX - containerRect.left算相对坐标，别用pageX—— 页面滚动时pageX会跳变 - 高频
touchmove必须节流，推荐用requestAnimationFrame包一层，否则 iOS 上容易掉帧 - 别依赖
:hover做显隐控制，移动端它只在点击后闪一下；遮罩层显隐必须由 JS 控制display或opacity
最容易被忽略的是边界校验：鼠标靠近容器边缘时，遮罩中心不能超出小图范围，否则 background-position 会拉出空白。这个判断必须在 JS 里做，CSS 无解。还有就是大图分辨率——如果原图只有 600×600，而你按 3 倍缩放去映射 200×200 的镜片窗口，结果只会糊成一片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
