网页上如何使用鼠标放大缩小图片

滚轮缩放用到哪些文件

html 里按这个顺序引：

页面就一个 .container 铺满窗口，图是 #image。touch-action: none 是为了手机上按住拖时，浏览器不要抢去滚动页面。光标用 url(“…/img/grab.cur”)，css 在 css/ 里，路径相对样式文件，不要写成相对 html。按下时给图加上 .is-grabbing，换成 grabbed.cur。

维护这一页时入口就是 index.html，图的地址写在 zoom.js 末尾的 image.src。

页面骨架

如何让图片居中显示

图要等 load 之后再算尺寸。naturalWidth、naturalHeight 是原图像素，没加载完是 0，拿 0 去除法会算出一堆 NaN，transform 白写。这坑我见过不止一次。

getImgSize 拿原图宽高比跟窗口宽高比比：图更「扁」就先卡窗口宽，高按比例下来；图更「高」就先卡窗口高，宽按比例下来。原图比窗口还小，就用原尺寸，不要强行拉大变糊。

算出的 width、height 写到 img 的样式上，这是缩放的基准尺寸，后面 scale 都乘在这组数上。居中很直白：窗口宽减图宽，剩的一半给 x；高同理给 y。再写成一句 transform：

translate3d 走 GPU，拖的时候比改 left/top 省事。x、y 必须存成变量，滚轮和拖动后面都要改它们，写死在字符串里下次就丢了。

如何让图片根据鼠标位置进行放大缩小

滚轮绑在 .container 上，不是绑在图上。图缩得很小时，鼠标落在黑底上也能缩；图放大后溢出窗口，黑底上滚一下也要能收回来。

每滚一格，倍率乘 1.1 或除 1.1。本例 minScale 写成 0.5、maxScale 写成 4，方便立刻看到顶和底；业务里看平面图，最小常常是 1（不再小于铺满窗口那一档），最大按能看清字的程度加，比如 8。顶到上下限时，ratio 要改成「刚好到边界」那一截，否则位置算偏，图会自己挪一下。

说白了：CSS 默认围着元素中心放大，鼠标下的那一点会跑走。鼠标在图上时，用 clientX、clientY 把 x、y 往回掰，让鼠标下的像素还停在鼠标下。我第一次看那两行减法也卡了一下，把它想成「放大后中心挪了多少，再按鼠标相对图的位置补回来」就顺了。

鼠标在黑底上时不改 x、y，围着图自己的中心缩放。preventDefault 拦住页面跟着滚；第三个参数 {passive: false} 不写，Chrome 里 preventDefault 会失效。

放大后如何按住拖动图片

放大之后图比窗口大，四周有一截在黑底外面。按住拖，就是改 x、y，scale 原样带着。一句 transform 里同时有 translate 和 scale，拖的时候放大倍数不会丢。

事件挂在 body 上委托。pointerdown 里 setPointerCapture，鼠标滑出图外也能继续拖，不会丢。按下加 .is-grabbing，抬起或 pointercancel 再去掉。

diff 是相对上一帧指针的位移，不要相对 down 的起点累加，否则和 scale 叠在一起会觉得拖一步跳一大截。jQuery 事件里的 pointerId 在 e.originalEvent 上，直接写 e.pointerId 是 undefined，捕获绑不上。

isPointerdown 挡住「没按下却在图上滑」；pointermove 里仍 preventDefault，避免选中图片被浏览器当成拖文件。

如何把示例代码在真实项目中使用

大图地址换成业务里的图：列表点某一张，把 URL 赋给 image.src。load 里会重新算居中，并把 scale 置回 1。事件只绑一次，靠 eventsBound 挡住，换图不会套两层滚轮。

jQuery 这套建议用 Layui 做提示，具体按实际项目来定。图 404 走 layer.msg，不要 alert。

倍率上下限改 minScale、maxScale。容器不是全屏时，getImgSize 的后两个参数不要写 window.innerWidth，改成容器的宽高，x、y 的居中也按容器算。

下面这份把居中、滚轮、拖动和换图写在一起，用它覆盖 zoom.js。页面结构仍用前面的 html。/api/design/detail 的路径和字段换成项目里的约定。

列表每项带 data-id。接口返回的图要跟页面同域，或后台把 CORS 和图片响应头开好，否则有的环境会裂。居中和缩放不用改，只换 URL 和倍率上下限。