將原始JavaScript中的屏幕/圖像縮放到指針單擊

Question

我正在創建產品的思維導圖。

用戶需要單擊氣泡，屏幕/圖像應在該位置放大。

同時要進行縮放，我想向用戶詳細顯示產品信息。 它需要淡入淡出頂部的新圖像，然后在1秒鍾后顯示產品信息。

如何使用Vanilla JS實現此目的？

我如何在用戶單擊的位置放大類似的效果？ 隨后向他顯示新圖像和產品列表。 當用戶單擊時，動畫應從產品中縮小，並開始顯示其他圖像。

Answer 1

使用jquery設法做到了這一點，但這還沒有達到目的！ 因此，請為此作答，這可能有助於您自己實施！

在這里演示

謝謝

  $('.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>