Увеличить 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"});
        }

   });
});

Answer 2

Просто используйте следующий код при нажатии для увеличения:

$("#imgID").css({
      'width' : $("#img01").width()  * 1.1
    , 'height': $("#img01").height() * 1.1
  });

Используйте следующий код при уменьшении при нажатии:

	$("#imgID").css({
      'width' : $("#img01").width()  * 0.9
    , 'height': $("#img01").height() * 0.9
  });