聚焦图像的特定部分

Question

我使用 jQueryUI Draggable 在 div 中创建了一个可拖动图像。我想使用一个按钮关注可拖动图像的特定区域，该按钮具有特定区域的坐标 data-coord。有什么建议吗？

$("#inner").draggable({
  containment: $('#content')
});

#wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#content {
  position: absolute;
  top: -4252px;
  left: -3600px;
  width: 7600px;
  height: 8904px;
}

#inner {
  position: absolute;
  width: 4000px;
  height: 4652px;
  top: 4252px;
  left: 3600px;
}

#getArea {
  margin: 10px 0;
  padding: 5px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<button id="getArea" data-coord="">getArea</button>
<div id="wrapper">
  <div id="content">
    <img id="inner" alt="" src="https://i.ibb.co/PjFTv6N/MVIII07042020-ICONS-HIGH-RES-2.jpg" />
  </div>
</div>

jsFiddle

Answer 1

draggable 库只是将一个绝对定位的元素放入其中设置了 overflow: hidden 的元素中。因此，当单击按钮将其移动到所需位置时，您可以简单地为 #inner 的 left 和 top 位置设置动画。试试这个：

let $inner = $("#inner").draggable({
  containment: $('#content')
});

$('#getArea').on('click', function() {
  $inner.animate({
    left: 2675,
    top: 3235
  });
});

#wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#content {
  position: absolute;
  top: -4252px;
  left: -3600px;
  width: 7600px;
  height: 8904px;
}

#inner {
  position: absolute;
  width: 4000px;
  height: 4652px;
  top: 4252px;
  left: 3600px;
}

#getArea {
  margin: 10px 0;
  padding: 5px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<button id="getArea" data-coord="">getArea</button>
<div id="wrapper">
  <div id="content">
    <img id="inner" alt="" src="https://i.ibb.co/PjFTv6N/MVIII07042020-ICONS-HIGH-RES-2.jpg" />
  </div>
</div>

聚焦图像的特定部分

Focus a certain part of the image

jquery

imagemap

jquery-ui-draggable