纯css无法实现真正鼠标跟随的图片放大镜，必须用javascript动态计算坐标并控制放大图偏移；核心是双图层+background-position裁剪+scale缩放，需等高清图加载完成再启用交互。
纯 CSS 无法实现真正意义上的图片放大镜（即局部高倍放大 + 实时跟随鼠标），必须配合 JavaScript 捕获鼠标位置并动态裁切/缩放图层。所谓“纯 CSS 放大镜”只是 hover 缩放整图，和实际需求不符。
为什么 transform: scale() 不行
很多人试过给图片加 :hover { transform: scale(2); }，结果发现只是整张图变大、溢出容器，根本不是“鼠标指哪看哪”的放大镜效果。这是因为：transform 作用于整个元素，不支持局部坐标映射和实时偏移计算。
- 无法响应鼠标
clientX/clientY坐标做区域裁剪 - 放大后图片位移与鼠标位置无绑定关系，视觉上完全脱节
- 移动端 touch 事件无法兼容，且无 hover 触发机制
核心思路：双图层 + 定位裁剪
真实可用的放大镜依赖两个 DOM 元素协同：一个显示原图（小尺寸），一个作为放大源（大尺寸高清图），用 clip-path 或 background-position 动态控制放大区域。
- 原图容器设为相对定位，监听
mousemove；放大图容器绝对定位，尺寸固定（如 200×200px） - 根据鼠标在原图内的相对坐标，计算放大图的
background-position偏移值，公式是：-x * scale和-y * scale - 放大图分辨率至少是原图的 2–3 倍，否则放大后模糊（例如原图 400×300，放大图建议 1200×900）
示例关键逻辑：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const zoomer = document.querySelector('.zoomer');
const zoomImg = document.querySelector('.zoom-img');
zoomer.addEventListener('mousemove', (e) => {
const rect = zoomer.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const scaleX = zoomImg.naturalWidth / zoomer.clientWidth;
const scaleY = zoomImg.naturalHeight / zoomer.clientHeight;
zoomImg.style.backgroundPosition = `-${x * scaleX}px -${y * scaleY}px`;
});
用 clip-path 还是 background-position？
两者都能实现裁剪，但行为差异明显：
-
background-position更轻量，适合放大图作为background-image存在；缺点是无法对 PNG 透明通道做精细控制，且不能直接应用 filter -
clip-path: circle()或inset()配合transform: scale()可以做出圆形镜框效果，但需额外计算圆心坐标，且 Safari 对clip-path的circle()支持曾长期有问题（iOS 15.4+ 已稳定） - 现代稳妥做法：用
background-position控制区域 +transform: scale()控制倍率，再用overflow: hidden裁剪容器
移动端适配的关键点
手指滑动没有精确坐标流，touchmove 的 touches[0] 坐标必须减去容器 offset 才能对齐，且要防止页面默认滚动干扰：
- 给容器加
touch-action: none，禁用浏览器默认拖拽 - 监听
touchmove时取e.touches[0].clientX，而非e.targetTouches（后者可能为空） - 避免在
touchstart时立刻触发放大层显示——先等第一次touchmove再激活，减少误触 - 安卓 WebView 中
background-size: cover有时渲染异常，建议显式写死background-size: 300% 300%并同步调整background-position计算系数
最易被忽略的是图片加载时机：如果在 img.onload 之前就绑定 mousemove，naturalWidth/Height 会是 0，导致坐标计算全错。所有基于尺寸的逻辑，务必等高清图加载完成后再启用交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
