DOM放大镜效果核心是精准截取+实时映射+视觉跟随：通过监听鼠标移动，用background-position和background-size模拟局部放大，同步更新浮层位置与背景偏移，并做好坐标统一、边界控制和性能优化。
DOM 元素实现放大镜效果，核心是监听鼠标移动，动态截取目标区域图像并放大显示在浮动层中，同时保持位置同步。关键不在“放大”，而在“精准截取+实时映射+视觉跟随”。
准备两个关键元素：原图容器和放大镜浮层
需要一个原始图片（或带背景图的元素）作为观察对象，再创建一个绝对定位的 div 作为放大镜窗口。放大镜本身不放大原图，而是用 background-position 和 background-size 模拟局部放大。
- 原图容器设为
position: relative，方便浮层定位 - 放大镜浮层设固定宽高（如 200×200px）、
overflow: hidden、border-radius（可选圆角） - 浮层背景图设为与原图相同，但
background-size放大（如 300%），用于拉伸细节
监听鼠标移动，计算截取坐标
在原图容器上绑定 mousemove，根据鼠标相对于容器左上角的偏移（clientX - offsetLeft 等），换算出对应原图中的像素位置。
- 获取鼠标在容器内的相对坐标：
const x = e.clientX - el.getBoundingClientRect().left - 按缩放比例反算背景图应显示的原图坐标：
bgX = -x * scale，bgY = -y * scale（scale 是放大倍数，如 3） - 确保坐标不越界：用
Math.max(0, Math.min(maxX, x))限制范围
同步更新浮层位置和背景偏移
放大镜浮层中心需始终对准鼠标点，同时背景图按比例反向偏移，形成“所见即放大”的错觉。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 浮层
left和top设为x - mirrorWidth/2、y - mirrorHeight/2（让中心贴合鼠标） - 浮层
background-position设为${bgX}px ${bgY}px - 若原图是
<img>，可用canvas截图再重绘到浮层（适合复杂内容或非背景图场景）
适配不同内容类型：图片 vs 内联元素
纯图片推荐用 CSS background 方案，轻量高效；若要放大文字、按钮等 DOM 内容，则需用 transform: scale() + overflow: hidden 的伪镜像容器。
- 对 DOM 元素放大：创建副本节点，设
transform: scale(3)，再用translate反向移动，使其局部对齐鼠标 - 注意层级：放大镜浮层
z-index需高于原内容，且避免触发自身mousemove（加pointer-events: none到浮层内部遮罩） - 移动端需额外处理
touchmove，并考虑手指粗细，适当增大镜面尺寸
不复杂但容易忽略：坐标系统一、边界控制、性能节流（加 requestAnimationFrame 或简单 debounce）。做好这三点，放大镜就稳了。
