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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

1、用left、top来代替translate平移呗。
2、translate子元素，scale父元素。
目前能想到两个

Answer 6

iviewer.js

Answer 7

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

Answer 8

请问楼主是怎么实现的呀？

Answer 9

请问楼主是怎么实现的啊？我也需要了使用translate scale 缩放的问题，位置总是偏移，大佬能不能有偿帮我解决一下，真的挺急的，麻烦了