实现商品图片放大镜效果需三层嵌套结构：外层relative定位，内含小图、半透明遮罩层和大图容器；通过鼠标坐标换算控制遮罩居中与大图偏移，配合边界限制、过渡动画及移动端适配提升体验。
实现带放大镜效果的商品图片预览页，核心是监听鼠标移动、计算偏移、同步缩放区域与大图显示位置。不依赖第三方库也能完成，关键在坐标映射和图层叠加逻辑。
HTML结构：三层容器嵌套
用一个外层容器包裹“小图”和“遮罩层”，再叠加一个“大图容器”。小图用于用户交互，大图作为放大源，遮罩层实时反映鼠标覆盖区域。
- 外层容器设为 relative 定位，作为所有子元素的定位基准
- 小图（
<img>）设为 block，宽高固定，不拉伸变形 - 遮罩层（
<div class="mask">）用 absolute 定位，背景半透明，尺寸按比例缩放（如小图的 20%） - 大图容器（
<div class="big-img-wrap">）也 absolute，内部放一张高分辨率原图，用 transform: scale() 控制缩放，初始隐藏
CSS控制：精准定位与视觉反馈
遮罩层和大图容器的位置必须严格对应——鼠标在小图上移动时，遮罩中心点坐标 = 鼠标相对小图左上角的坐标；大图的 translate 偏移量 = -（鼠标坐标 × 缩放倍数）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 遮罩层用
pointer-events: none避免干扰鼠标事件，但需确保它能被 JS 获取尺寸 - 大图宽度/高度设为小图的 3~5 倍（取决于放大倍率），用
overflow: hidden裁剪显示区域 - 遮罩层边框加
box-shadow或outline提升视觉辨识度，比如浅色虚线
JavaScript逻辑：坐标换算与动态更新
监听小图的 mousemove，获取 clientX/clientY，减去小图 getBoundingClientRect() 的 left/top，得到鼠标在小图内的相对坐标。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层 left/top = 鼠标相对坐标 − 遮罩自身宽高的一半（居中对齐）
- 大图的
transform: translate(x, y)中 x/y = −(鼠标相对坐标 × 缩放倍率) + 偏移补偿（让遮罩中心对应大图中心） - 注意边界限制：遮罩不能超出小图范围，大图偏移也不能导致空白区露出来，需用
Math.min/max截断 - 鼠标移入小图显示放大镜，移出则隐藏大图容器和遮罩层
增强体验的小细节
真实电商场景中，用户常会快速扫视或点击切换图片，这些优化能让交互更自然：
- 给小图加
cursor: crosshair，提示可交互区域 - 遮罩层和大图容器使用
transition: transform 0.1s ease-out，避免跳变 - 支持 touchstart/touchmove（移动端），用
touches[0]替代 mouse 事件 - 若商品有多个 SKU 图片，切换时重置遮罩位置、清空 transform，防止残留偏移
