javascript - 缩放 HTML/CSS/Jquery

Question

我想尝试点击一个元素的缩放效果，类似于这个链接https://codepen.io/soniajain/full/QBejVL/

我试过的是这个https://codepen.io/soniajain/pen/dqXZxg但无法进行正确的计算。

如果有人能帮助我，那就太好了。

    <script type="text/javascript">
    $(document).ready(function() {
       $('.zoomTarget').click(function () {

            centerSelected();

       });
    });


function centerSelected() {


    var ele = $('.zoomTarget');
    var offset = ele.offset();
    var offsetLeft = offset.left;
    var offsetTop = offset.top;
    var vw = $(window).width();
    var vh = $(window).height();
    var scale = 2;

    $('.wrapper').css({});


}



    </script> 

Answer 1

这是我的解决方案，工作示例如下:

https://codebrace.com/editor/b1169cb27

在这个解决方案中，我为动画添加了 transition(以实现平滑缩放)和 transform 以实现 css 中的缩放。现在为了让“缩放目标”成为焦点，我在 jquery 之后编写了:

$(document).ready(function() {
    var wrapper = $(".wrapper");
        position = wrapper.offset();
   $('.zoomTarget').click(function (e) {
            wrapper.toggleClass("wrapperzoom");
        var lx = e.currentTarget.offsetLeft,
        ly = e.currentTarget.offsetTop;
        if(wrapper.hasClass("wrapperzoom")){
            //where 3 represent the amount of scaling value used in css
            wrapper.offset({ top: (position.top - ly)*3, left: (position.left - lx)*3});
        }else{
            wrapper.css({ top: "auto", left: "auto"});
        }

   });
});