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

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

阅读 2.4k
评论 2018-03-02 提问
    8 个回答
    CRIMX
    • 8.7k

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

    评论 赞赏 2018-03-02

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

      评论 赞赏 2018-03-02

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

        评论 赞赏 2018-03-02

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

          评论 赞赏 2018-03-02

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

            评论 赞赏 2018-03-07
              云卷云舒
              • 1
              • 新人请关照

              iviewer.js

              评论 赞赏 2018-03-09
                烟花й那么凉
                • 3
                • 新人请关照

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

                评论 赞赏 2018-04-05
                  hieeyh
                  • 935

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

                  评论 赞赏 2019-04-19
                    撰写回答

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