Question

我试图在大背景图像中放置一个小图标/标记，我希望背景图像在缩放时可以平移，并具有多个缩放级别。

到目前为止，我尝试的操作是这样的，我的默认分区大小是1363 x 900，显示在开发工具中。默认情况下，我的标记位于屏幕的边缘，default image without zoom，这是屏幕截图 default div size，单击panzoom的缩放功能后，我发现图像变大了，但是我尝试将标记平移到图像的边缘，它被卡在相同的x，y轴上在我的背景图像after zooming image中，我发现在开发工具中，div的大小仍然相同，after zoom div size，单击缩放后如何也更改div大小？是panzoom引起的问题吗？

panzoom来自github https://github.com/timmywil/panzoom，我正在使用此库。

这是我如何进行全景缩放和围堵的代码，

<body>

  <div class="buttons">
    <button class="zoom-out" onclick="zoomMinus()">-</button>
    <button class="zoom-in" onclick="zoomAdd()">+</button>
    <p id="zoomLevel">Zoom Level 1</p>
  </div>

  <section>
    <div id="panzoom" style="text-align: center;" class="panZoom">
      <img id="panzoomImg" src="{% static 'css/dist/img/photo4.jpg'%}" weight="1600" height="900"/>
    </div>

    </div>
    <div id="draggable1" style="width: 150px; height: 150px; background-color: orange;" class="parent">
      <div class="count"></div>
    </div>
  </section>

  <section>
    <div id="draggable" class="parent">
      <div class="padMargin">
        <!-- <div class="count"></div> -->
        <p class="counter" id="counter">10</p>
        <p class="counter1" id="counter1">20</p>
        <p class="counter2" id="counter2">30</p>
        <p class="counter3" id="counter3">40</p>
      </div>
  </section>
</body>

这是jquery代码：

 $('#draggable1').draggable({
    cursor: 'move', 
    containment: '#panzoomImg', 
    drag: function() {
      var cont = $('#panzoomImg').offset();
      var img = $(this).offset();
      var x = img.left - cont.left
      var y = img.top - cont.top
      $('#draggable1').text('x-axis :' + x + ', y-axis :' + y);
}});

$(function () {
    $("#draggable").draggable({
      containment: "#panzoomImg",
      scroll: false,
    });
  });

我的代码有误吗？或者我需要指定的jquery来添加div的大小？在此先感谢您，如果我没有提供足够的信息，请告诉我。谢谢!!〜

使用jQuery panzoom时，当我单击zoom时，img尺寸保持不变，如何缩放？

0 个答案: