必须用JS实现放大镜效果：容器设position: relative，镜片用absolute定位；坐标用getBoundingClientRect()计算并实时更新；background-position需按缩放比反向换算并居中；移动端需适配touch事件并防误触。

纯 CSS 无法实现“点击后持续局部放大”，更无法让放大镜跟随鼠标实时锚定位置；:hover 在移动端基本失效，:checked hack 只能控制显隐、无法绑定动态坐标——必须用 JS 计算坐标、映射 background-position、驱动 position: absolute 镜片移动。

容器必须设 position: relative，否则镜片飘到左上角

镜片元素用 position: absolute，但它需要一个已定位的祖先作为参考系。图片本身是替换元素，position: relative 对 无效；真正要加的是它的父容器（比如

）。

• 常见错误：只给 加 position: relative，结果镜片始终相对于 定位
• Flex/Grid 布局中，每个子项（如 .gallery-item）都得单独设 position: relative
• 容器若设了 overflow: hidden，但宽高没预留镜片移动余量，镜片会被裁掉——检查是否留够至少 lensWidth / 2 的边距

getBoundingClientRect() 是唯一靠谱的坐标来源

别用 event.offsetX/offsetY：它们在容器有 border、padding 或被 transform: scale() 缩放过时会严重失准。必须用 container.getBoundingClientRect() 获取容器视口位置，再扣减盒模型干扰。

• 监听事件的目标必须是容器（.image-container），不是
• 每次 mousemove 都要重新调用 getBoundingClientRect()，不能缓存（滚动或缩放会改变结果）
• 计算镜片 left/top 时，记得减去 lensWidth / 2 和 lensHeight / 2，实现中心对齐

background-position 映射必须按缩放比反向换算

放大镜显示的是大图局部，而大图通常作为 background-image 设置在另一个容器上。镜片中心点坐标（相对于小图容器）乘以缩放比后，要取负值，并补偿大图容器尺寸的一半，才能让背景图“拉”出对应区域。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 缩放比 = 大图自然尺寸 / 小图容器尺寸（例如 900px / 300px = 3）
• 错误写法：backgroundPosition = `${x * scale}px ${y * scale}px`（方向反了，也没居中）
• 正确写法：backgroundPosition = `${-(x * scale - bigContainerWidth / 2)}px ${-(y * scale - bigContainerHeight / 2)}px`
• 如果小图容器有 border 或 padding，x/y 必须先扣除，否则 background 偏移永远偏右下

移动端适配不能只靠 touchstart/touchmove

触摸事件默认有 300ms 延迟，且 touchstart 的 touches[0] 坐标需手动映射到容器内，不能直接复用 PC 的 clientX/clientY 逻辑。

• 必须用 event.touches[0].clientX 替代 event.clientX
• 为防误触，建议在 touchstart 后立即 preventDefault()，并禁用双击缩放（）
• 旧版 Safari（≤15.6）不支持 clip-path: circle(50px at 50% 50%) 中的 at 偏移，降级用 border-radius: 50% + overflow: hidden

最常被忽略的是：原图分辨率必须达到显示区域的 2 倍以上，否则放大后全是模糊锯齿；background-size 别用 100% 100%，它会强制拉伸失真——该用 cover 或明确像素值。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！