Question

我正在使用jquery.panzoom来平移和缩放图片以响应鼠标或触摸事件。这工作正常，但现在我想将图像与叠加（SVG文件或其他图像）一起缩放。叠加层和图像的大小完全相同，我只是希望它们在平移和缩放方面表现为单个图像。

我尝试将它们放在div中，如下所示：

<div id="mydiv">
  <img src="image.jpg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;">
  <img src="overlay.svg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;">
</div>

<script>
  $("#mydiv").panzoom();
</script>

当我这样做时，布局变得混乱。

如何同时平移/缩放图像和叠加（或多个图像）？

（我想继续使用jquery.panzoom，因为这似乎在我的目标平台上运行得非常好，但如果有另一个同样可以工作的库，那么

Answer 1

根据他们的documentation，这应该有效：

(function() {
  var $section = $('#collectionId');
  $section.find('.panzoom').panzoom({
    $set: $section.find('.parent > div')
  });
})();

<section id="collectionId">
  <div class="parent">
    <div class="panzoom">
      <img src="image.jpg">
    </div>
    <div>
      <img src="overlay.svg">
    </div>
    <div>
      <img src="anotherOverlay.svg">
    </div>
  </div>
</section>

如何同时平移/缩放图像和叠加？

1 个答案: