在vanilla JavaScript中缩放屏幕/图像到指针单击

Question

我正在创建一个产品的思维导图。

用户需要单击气泡，屏幕/图像应放大该位置。

​

​

同时缩放发生，我想向用户显示详细的产品信息。它需要在顶部淡入一个新的图像，然后在1秒后显示产品信息。

​

​

我如何使用Vanilla JS实现这一点？

我怎样才能对用户点击的地方产生类似的放大效果呢？然后向他展示一个新的图像和产品列表。当用户单击back时，动画将从产品中缩小，并开始显示另一个图像。

Answer 1

不知何故，使用jquery成功做到了这一点，但它并没有达到标准！所以，请原谅我这样做，这可能会帮助你自己实现！

演示here

谢谢

​

 $('.back').hide();
    $(document).on('click', function(e) {
    var scale = 1;  
    var xLast = 0;  
    var yLast = 0;  
    var xAxis = 0; 
    var yAxis = 0; 
    $('#item').click(function(e, delta){

      var xScreen = e.pageX - $(this).offset().left;
      var yScreen = e.pageY - $(this).offset().top;


      xAxis = xAxis + ((xScreen - xLast) / scale);
      yAxis = yAxis + ((yScreen - yLast) / scale);
      console.log(xAxis);
      console.log(yAxis);

      if (delta > 0)
      {
        scale *= 2;
      }
      else
      {
        scale /= 2;
      }
      scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);


      var xNew = (xScreen - xAxis) / scale;
      var yNew = (yScreen - yAxis) / scale;


      xLast = xScreen;
      yLast = yScreen;


      $("#item").css('transform', 'scale(2)' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')').css('transform-origin',+ xAxis + 'px ' + yAxis + 'px');
      $('.back').show();
      
      return false;
    });
    });

#item{
    background:url("http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg");
    width:100vw;
    height:100vh;
    transition:0.4s all;

  }

  span{
    background-color:red;
    width:30px;
    height:30px;
    position:absolute;
    border-radius:50%;

  }

  #point1{
    top:200px;
    left:90px;
  }

  #point2{
    top:400px;
    left:300px;
  }
  .back
  {
    width:40px;
    height:10px;
    background-color:yellow;
    position:fixed;
    top:30px;
    left:30px;
    position:fixed;
  }

    <script src="https://code.jquery.com/jquery-3.1.0.js"></script><div id="container">
      <div class="back"></div>

      <div id="item">
        <span id="point1"></span>
        <span id="point2"></span>
      </div>

​