基础放大镜本质是裁剪放大的子区域，需用 overflow: hidden 容器限制显示范围，并对内部元素用 transform: scale() 和 translate() 缩放偏移；CSS 变量控制缩放与偏移，JavaScript 实时更新鼠标位置百分比坐标。
用 transform: scale() + overflow: hidden 实现基础放大镜区域
局部放大镜本质是「裁剪一个放大的子区域」，不是单纯放大整个图片。必须用容器限制显示范围，再对内部元素做缩放和位移。常见错误是只加 scale(1.5) 却没设 overflow: hidden，结果悬停时内容溢出、布局错乱。
关键结构：div 容器设固定宽高和 overflow: hidden，内部 img 或 background-image 用 transform 缩放并偏移。缩放值越大，可视区域越小，放大感越强。
- 容器宽高需明确（如
width: 300px; height: 200px;），不能依赖内容撑开 -
img默认display: inline，建议设display: block避免底部空白 - 若用背景图，
background-size要设为cover或具体像素值，否则transform会作用在背景定位上而非图像本身
用 CSS 自定义属性（--zoom 和 --offset-x）动态控制缩放与偏移
CSS 变量让放大镜可配置，避免写死数值。但注意：变量只能用于声明，不能直接参与 transform 计算（比如 translate(calc(var(--offset-x) * 1px), 0) 不生效）。正确做法是把变量传给 transform 的每个函数，由浏览器解析。
示例中，--zoom: 1.8 控制缩放倍数，--offset-x 和 --offset-y 控制中心点偏移（单位为百分比，配合 transform-origin 使用更直观）：
img {
transform: scale(var(--zoom)) translate(
calc(-1 * var(--offset-x)),
calc(-1 * var(--offset-y))
);
transform-origin: var(--offset-x) var(--offset-y);
}
-
transform-origin设为偏移变量，能让缩放以鼠标位置为中心，而不是默认左上角 -
translate的负号是因为：图像放大后，要反向移动才能让目标区域“进入”裁剪框 - 变量需在悬停前初始化，例如
:root { --zoom: 1.5; --offset-x: 50%; --offset-y: 50%; }
用 JavaScript 实时更新 --offset-x 和 --offset-y 实现鼠标跟随
CSS 无法读取鼠标坐标，必须靠 JS 获取 mousemove 事件的 clientX/clientY，再换算成相对于容器的百分比位置，写入 CSS 变量。
核心逻辑：监听容器 mousemove，计算 (e.clientX - rect.left) / rect.width 得到 X 百分比，同理得 Y，然后 element.style.setProperty('--offset-x', x + '%')。
- 务必用
getBoundingClientRect()获取实时容器位置，避免滚动或缩放导致坐标偏移 - 不要在
mousemove中频繁触发重排；写 CSS 变量是纯样式操作，性能可接受 - 悬停离开时（
mouseleave），建议重置变量（如--offset-x: 50%），否则图像可能卡在边缘 - 移动端需额外处理
touchmove，且注意touchstart后要preventDefault防止页面滚动干扰
兼容性与性能注意点：will-change 和硬件加速别乱加
放大镜涉及高频 transform 更新，容易触发重绘。但盲目加 will-change: transform 可能适得其反——它会强制创建合成层，吃内存，尤其在多个放大镜共存时。
真正有效的优化是确保缩放元素启用了硬件加速：用 transform: translateZ(0) 或 transform: scale(1.0001) 触发 GPU 渲染。但仅对 img 元素加即可，容器不需要。
- IE11 不支持 CSS 变量，如需兼容，得用 JS 直接操作
style.transform - Safari 对
transform-origin百分比值的支持较稳定，但旧版可能对小数精度敏感（如49.99%比50%更准） - 如果放大后出现边缘锯齿，尝试加
image-rendering: -webkit-optimize-contrast（仅 WebKit）或image-rendering: crisp-edges
变量控制偏移和缩放看似灵活，但真正难的是坐标换算的鲁棒性——滚动、缩放、iframe 嵌套都会让 getBoundingClientRect() 返回值失效，这些边界情况容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
