纯CSS无法实现鼠标跟随的放大镜效果，必须用JS监听mousemove/touchmove事件动态计算background-position；核心是背景图放大200%以上+容器overflow:hidden裁剪，再通过坐标归一化换算偏移百分比。
用 CSS 实现 hover 放大镜效果，不需要 JS
纯 CSS 方案完全可行，核心是利用 transform: scale() + overflow: hidden 容器裁剪。关键不是“放大整张图”，而是放大图中鼠标悬停区域的局部——这需要把图片设为背景并配合 background-position 动态偏移。
- 外层容器设固定宽高、
overflow: hidden，作为“镜片”裁剪区域 - 内层图片用
background-image，尺寸设为原图 2–3 倍（如原图 400×300，背景图设 800×600） - 用
:hover触发background-size: 200%并结合background-position跟随鼠标移动（需 JS 配合定位） - 如果只要简单中心放大（不跟随鼠标），可省略 JS：直接
transform: scale(1.5)+transition，但这是全图缩放，不是“放大镜”
必须用 JS 控制 background-position 才算真放大镜
纯 CSS 无法读取鼠标坐标，所以要实现“鼠标指哪放大哪”，background-position 的计算必须由 JS 完成。监听 mousemove，根据鼠标相对容器的位置，换算成背景图偏移量：
container.addEventListener('mousemove', (e) => {
const rect = container.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const bgX = (x / rect.width) * 100;
const bgY = (y / rect.height) * 100;
img.style.backgroundPosition = `${bgX}% ${bgY}%`;
});
-
rect.width/height是容器尺寸，不是原图尺寸；百分比值直接对应background-position的%单位 - 若背景图放大 2 倍（
background-size: 200%），则有效偏移范围是0%–100%，刚好匹配容器坐标归一化结果 - 别忘了给容器加
position: relative，否则getBoundingClientRect()可能受父级 transform 影响
移动端 touchstart/move 适配要点
手机端没有 mousemove，得监听 touchstart 和 touchmove，且事件对象坐标字段不同：
- 用
e.touches[0].clientX替代e.clientX，同理取clientY - 必须在
touchstart时调用e.preventDefault()，否则 iOS Safari 会触发默认滚动行为，中断 touchmove - 建议加个开关变量，避免 touch 和 mouse 事件同时触发（比如在
touchstart后禁用 mouse 监听） - 移动端屏幕密度高，
background-size建议设到250%或更高，否则放大感不明显
性能与兼容性绕不开的坑
高频 mousemove 或 touchmove 直接改 background-position 容易卡顿，尤其低端安卓机。优化点很实际：
- 用
requestAnimationFrame节流，不要在事件里直接改样式 - 避免用
left/top移动一个绝对定位的遮罩层（旧方案），它会触发重排；background-position是重绘，更轻量 - IE11 不支持
background-position百分比动态更新（有 bug），如需兼容，得降级为固定位置或放弃 IE - 如果图片来自 CDN，确保响应头含
Cache-Control: public，否则反复缩放可能触发多次请求（某些浏览器对 background-size 变化会重载背景图）
真正难的不是写出来，是让放大区域边缘不模糊、手指滑动时不跳变、缩放比例和偏移换算刚好对齐像素边界——这些细节得靠真实设备反复调 background-size 和容器尺寸的比例关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
