纯CSS基础放大镜效果可用overflow:hidden+transform:scale()实现，但仅适合静态示意；需容器固定宽高、图片撑满、伪元素模拟镜片，无法精准定位，放大后易模糊。
用 pure CSS 实现基础放大镜效果（无需 JS）
纯 CSS 方案适合静态图片、轻量需求，核心是利用 clip-path + transform: scale() 模拟镜片区域。但注意：它不能真正“取原图高分辨率区域”，只是对整张图做局部缩放，放大后会模糊。
关键点：
- 给图片容器设
overflow: hidden，再用伪元素::after模拟镜片（圆形clip-path+scale(2)） - 鼠标移动时靠
background-position配合transform: translate()调整镜片位置和缩放中心 - 必须确保原图尺寸 ≥ 容器尺寸，否则放大后边缘会空白
示例结构：
<div class="magnifier"> <img src="product.jpg" alt="product"> </div>
CSS 中需绑定 :hover 和 transform 动画，但无法响应精确坐标——所以只适用于示意性场景，比如商品图悬停粗略放大。
立即学习“前端免费学习笔记（深入）”；
用 JavaScript 监听 mousemove 实现精准坐标映射
真·放大镜效果依赖实时计算鼠标相对于图片的坐标，并按比例映射到高清图的对应区域。这是最常用、兼容性最好的方案。
实操要点：
- 需要两张图：
src（小图，展示用）和data-large（大图，放大源），比如<img src="thumb.jpg" data-large="full.jpg"> - 监听
mousemove，用event.offsetX/event.offsetY获取鼠标在<img>内部坐标（注意：IE 不支持，得用getBoundingClientRect()手动算） - 镜片尺寸（如 200×200px）与原图宽高比决定缩放倍数：
scale = largeWidth / smallWidth - 大图的
background-position应为-x * scale和-y * scale，才能让鼠标指向点始终居中显示
容易漏掉的细节：要给镜片容器设 pointer-events: none，否则会打断图片的 mousemove 事件流。
使用 zoom.js 或 vanilla-magnify 这类轻量库时要注意什么？
这类库封装了坐标计算和 DOM 插入逻辑，但默认行为未必贴合你的布局。
常见坑：
-
zoom.js默认把放大图插入body末尾，若页面有transform或overflow: hidden的祖先元素，镜片可能被裁剪——得手动传container选项指定父容器 -
vanilla-magnify的zoomFactor是乘数（如2表示 2 倍），但实际渲染依赖大图分辨率；如果大图只有 1.5× 原图，设成3就会严重模糊 - 所有库都不处理 WebP/AVIF 格式 fallback，若
data-large是 WebP，而旧浏览器不支持，就会 404——得自己加onerror切换备用路径
建议初始化前先校验大图是否存在：new Image().src = largeUrl，失败则降级为 CSS 方案。
移动端 touchstart/touchmove 怎么适配？
手机端没有 hover，也不能依赖 mousemove，必须单独处理触摸事件。
关键差异：
- 用
touchstart替代mouseenter，touchmove替代mousemove，且要阻止默认行为e.preventDefault()防止页面滚动 -
touches[0]的clientX/clientY需减去图片左上角位置（getBoundingClientRect()），再转为相对坐标 - 镜片默认要更大（比如 250×250px），因为手指触控精度低；同时建议加
transition: transform 0.1s避免卡顿 - iOS Safari 对
transform: scale()的子元素有渲染 bug，有时镜片内图像错位——可改用background-size: cover+background-position绕过
别忘了在桌面端也监听 touchstart：很多 Windows 笔记本或 Chrome DevTools 的 mobile 模式会触发触摸事件，导致重复绑定。
真正难的不是写出放大镜，而是让同一套逻辑在高清屏、缩放字体、iframe 嵌入、CSS 变量主题切换等场景下仍准确定位——这些细节往往要靠 getBoundingClientRect() 多算一层，再扣掉 scrollLeft/scrollTop 和 devicePixelRatio 偏移。
