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

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

阅读 3.4k
评论
    9 个回答
    • 9k

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

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

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

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

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

              • 1
              • 新人请关照

              iviewer.js

                • 3
                • 新人请关照

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

                  • 956

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

                    • 1
                    • 新人请关照

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

                    该答案已被忽略,原因:无意义的内容:赞、顶、同问等毫无意义的内容,不符合答题规范:内容不是答案,可用评论、投票替代

                      撰写回答

                      登录后参与交流、获取后续更新提醒