最简局部放大需用img+div实现：大图作背景，div模拟放大镜，通过mousemove/touchmove监听鼠标/触摸位置，按比例换算background-position并配合background-size>100%（如200%）实现放大效果，注意坐标归一化与边界限制。
用 img + div 实现最简局部放大，不依赖任何库
纯 CSS + 原生 JS 就能跑起来，不用引入 zoom.js 或 jquery-zoom 这类第三方，避免兼容性问题和打包体积膨胀。核心思路是：大图作为背景铺在容器里，用另一个 div 模拟“放大镜”，实时计算鼠标位置并同步偏移背景位置。
- HTML 只需要一个
<img>标签（原始大图）和一个空<div class="zoom-container"></div> - CSS 控制容器尺寸、隐藏溢出、设置背景图平铺方式为
no-repeat，关键属性是background-position: x y - JS 监听
mousemove，根据鼠标相对容器的坐标，按比例换算成背景图的background-position值
background-size 必须设为大于 100%，否则放大无效
这是初学者最容易卡住的点：如果只改 background-position 而不放大背景图本身，看到的只是平移，不是放大。必须配合 background-size 才行。
- 推荐值：
background-size: 200% 200%—— 表示背景图宽高都是容器的 2 倍，此时移动background-position1px，视觉上就相当于放大后移动了 0.5px - 若设为
150% 150%，放大倍率只有 1.5×，效果弱；设为300% 300%，对原图分辨率要求更高，小图会模糊 - 注意：不能写成
background-size: cover或contain，它们会重置缩放逻辑
鼠标坐标换算公式：为什么用 clientX - offsetLeft 而不是 pageX
直接用 event.pageX 会导致放大区域随页面滚动偏移，因为它是相对于整个文档左上角的坐标。必须转成相对于容器左上角的坐标。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确写法：
const x = e.clientX - container.offsetLeft（container是放大容器 DOM 元素） - 再做归一化：
const bgX = (x / container.offsetWidth) * (bgWidth - container.offsetWidth)，其中bgWidth是放大后背景图的实际宽度（比如原图宽 800px ×background-size的横向倍率） - 常见错误：漏掉减去
offsetLeft/offsetTop，或没考虑容器 padding/border，导致放大镜总偏右偏下
移动端适配要单独处理 touchstart 和 touchmove
桌面端靠 mousemove 够用，但手机上必须监听触摸事件，且需阻止默认行为防止页面滑动干扰。
- 绑定事件时加
{ passive: false }，否则preventDefault()会失效 -
touchmove的坐标取e.touches[0].clientX，不是e.targetTouches或e.changedTouches - 建议加一个开关变量（如
isDragging = true），在touchstart设为true，touchend设为false，避免手指抬起后还继续响应
放大镜边缘容易超出容器边界，得手动限制 background-position 的最大最小值，不然会出现大片空白。这个边界计算稍烦，但绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
