局部放大必须用 js 实现，因纯 css 的 :hover/:active 无法维持点击后状态，:checked 方案不支持动态坐标定位；js 需精确计算鼠标位置、扣减盒模型偏移、映射 background-position 并控制放大镜定位。
点击后保持放大状态必须用 JS 控制显隐，纯 CSS 无法维持
纯 CSS 的 :hover 或 :active 都不能实现“点击后持续局部放大”——:hover 只响应悬停、:active 仅在按下瞬间生效，松手即恢复，且无法跨元素控制遮罩层。真正可用的纯 CSS 方案只有 :checked + 隐藏 <input type="checkbox"> 或 <input type="radio">，但这类方案只适合单图预览，不适用于需要实时锚定鼠标位置的局部放大（比如商品详情页的镜片式放大）。
所以结论很直接：局部放大 ≠ 全图弹出预览；它要求放大窗口始终跟随点击点，并显示原图对应区域——这一步必须靠 JS 记录坐标、计算偏移、更新 background-position 和 left/top。
- 不要尝试用
:focus-within模拟，它无法获取精确点击坐标 - radio hack 虽能控制显隐，但无法动态绑定坐标，只能配合固定位置的大图容器
- 移动端
:hover基本失效，:active延迟明显，JS 是唯一可靠路径
定位计算必须扣掉 border/padding，否则放大镜总偏右下
最常踩的坑是直接把 e.clientX 和 e.clientY 赋给放大镜的 left 和 top。结果放大镜永远浮在鼠标右下方——因为没减去容器自身的 border 和 padding。
正确做法是用 getBoundingClientRect() 获取容器相对于视口的位置，再结合 getComputedStyle() 扣除盒模型干扰：
const rect = container.getBoundingClientRect(); const style = getComputedStyle(container); const leftOffset = parseInt(style.borderLeftWidth) + parseInt(style.paddingLeft); const topOffset = parseInt(style.borderTopWidth) + parseInt(style.paddingTop); const x = e.clientX - rect.left - leftOffset; const y = e.clientY - rect.top - topOffset;
- 容器必须设
position: relative，否则.magnifier会相对body定位 - 如果容器用了
box-sizing: border-box，padding已计入宽高，但仍需显式扣除 - 避免对图片本身加
transform: scale()，否则background-position计算会失准
background-position 映射要按缩放比换算，不是简单等比
放大镜显示的是原图局部，而原图通常作为 background-image 设置在遮罩层上。要让遮罩层中心对准鼠标点击点，background-position 必须反向映射：原图尺寸越大，偏移量越小。
假设原图宽高为 bgWidth × bgHeight，遮罩层宽高为 magWidth × magHeight，缩放比为 scale = bgWidth / magWidth，则：
const bgX = - (x - magWidth / 2) * scale;
const bgY = - (y - magHeight / 2) * scale;
magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
- 原图分辨率至少要是显示区域的 2 倍，否则放大后模糊；例如遮罩层 200×200px，原图对应区域应 ≥400×400px
- 禁用
background-size: 100% 100%，改用固定像素值（如400px 400px）或cover - 可加
image-rendering: crisp-edges抑制插值模糊（对线条/文字图有效，照片慎用）
clip-path 圆形裁剪要注意 Safari 和 Android WebView 兼容性
clip-path: circle(50px at 50% 50%) 是实现圆形放大镜最干净的方式，比 border-radius: 50% 更精准——后者只是视觉圆角，DOM 区域仍是矩形，容易误触边缘。
但问题在于：旧版 Safari（≤15.6）和部分 Android WebView 不支持 at 后的数值偏移，会直接忽略整个声明。
- 降级方案：用
clip-path: circle(50px)+ 手动设置left/top居中，同时加overflow: hidden - 移动端建议 fallback 到
border-radius: 50%+overflow: hidden组合 - 频繁动画时加
will-change: clip-path提示浏览器优化图层合成 - 若需星形或多边形，用
clip-path: polygon()，坐标必须归一化（如0.25 0.25表示 25% 位置）
实际复杂点不在 CSS 写法，而在坐标映射与盒模型误差的反复校验——每次改容器样式（比如加个 outline 或 margin），都得重新检查偏移逻辑。多数线上 bug 都卡在这一步，而不是放大镜本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
