1

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

到目前为止，我尝试的是这样，我的默认分割大小是 1363 x 900，它显示在开发工具中。默认我的marker是放在屏幕边缘的，默认图片没有缩放这里是截图 默认的div大小，点击panzoom的缩放功能后，我看到我的图片变大了，但我尝试将标记平移到图像的边缘，它卡在我的背景图像的同一 x ， y 轴上，缩放图像后，我发现在我的开发工具中，div的大小仍然相同，缩放 div 后大小，单击缩放后如何更改我的 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 的大小？？提前谢谢，如果我没有提供任何足够的信息，请告诉我。欣赏！！~

4

0 回答 0