纯css的scale()不是局部变焦，仅整图拉伸且无定位关联；真局部变焦需双图+background-position动态映射，配合touch事件拦截、边界限制及加载时机处理。
为什么纯 CSS 的 transform: scale() 不算局部变焦
它只是把整张图拉伸放大，鼠标悬停位置和放大部分完全无关；移动端根本不会触发 :hover；更关键的是，放大后像素被强行插值，细节糊成一片。你看到的不是“局部变焦”，只是“整图撑开+裁边”。
必须用双图 + background-position 动态映射
核心是两张图：小图用于显示和定位（比如 400×300），高清大图作为源（比如 1200×900），放大容器用 div 而非 img，靠 background-image 和动态改 background-position 来“移动视口”。
-
scale = largeWidth / smallWidth（例如1200 / 400 === 3） - 鼠标在小图上坐标为
(x, y)，则大图背景应设为background-position: -x * scale px -y * scale px - 必须加边界限制：
Math.max(0, Math.min(largeWidth - viewWidth, -x * scale))，否则移出范围就留白或黑边 - 高清图建议走
background-image，iOS 下用img+transform更容易模糊
移动端 touch 事件必须手动拦截
iOS Safari 和 Android Chrome 默认把 touchmove 当滚动处理，不干预就会卡顿、跳转，甚至放大镜不动。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给镜头容器加
touch-action: none - 在
touchmove回调第一行立刻写e.preventDefault()，不能只在touchstart绑一次 - 取触点用
e.touches[0]，别用e.changedTouches[0]——它在快速滑动时可能为空
最容易被忽略的加载时机问题
代码一加载就绑事件，但高清图还没下载完，naturalWidth 是 0，算出来的 background-position 全是 NaN，镜子里一片空白。
- 不能只等
img.onload：缓存命中时该事件根本不触发 - 必须检查
img.complete === true，再决定是否立即计算尺寸 - 稳妥做法：先监听
load，再手动判断complete，两者都覆盖 - 如果用
URL.createObjectURL()加本地文件，绘制完记得调URL.revokeObjectURL()，否则内存泄漏
真实实现中，坐标归一化、缩放倍数与容器宽高的耦合、以及 touch 和 mouse 事件的统一抽象，才是最耗时间的部分。别指望 copy-paste 一段 JS 就能跑通。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
