js如何以鼠标为中心对图片进行缩放。

Question

我目前用了transform的translate使图片可以平移，并用scale对图片进行缩放。然后想实现一下缩放的中心点根据鼠标位置而定这一功能，但是发现如果已经进行了缩放，修改transform-origin后会导致图片瞬移。在缩放之前将目标瞬移到中央再放大感觉交互上不上很好，求实现过类似功能的大神指点一下思路~

Answer 1

transform-origin 不要动，根据鼠标位置以及当前 scale 和 translate 计算新的 scale 和 translate 就行。

Answer 2

直接把鼠标中心设置成transform-origin

Answer 3

就是类似淘宝商品图片放大的那种吧，搜索下有不少别人的代码可以参考下。
我没有写过这功能，不过要做的话，一般都有成熟的插件实现。
链接描述

Answer 4

translateX增加的距离 = (0.5 - 鼠标所在位置于x轴上的比例) * (缩放后的宽度 - 缩放前的宽度);
translateY增加的距离 = (0.5 - 鼠标所在位置于y轴上的比例) * (缩放后的高度 - 缩放前的高度);

Answer 5

瞬移应该是由于变形原点是基于未缩放之前的图片来算的，并不会跟随缩放后的图片而动，所以会瞬移到相对于原图变形原点的位置缩放