聚焦图像的某个部分答案

【问题标题】：Focus a certain part of the image聚焦图像的某个部分
【发布时间】：2020-04-08 15:33:47
【问题描述】：

我使用 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

【问题讨论】：

标签： jquery jquery-ui-draggable imagemap

【解决方案1】：

可拖动库只是将一个绝对定位的元素放入其中设置了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>

【讨论】：