jquery - 使用鼠标从中心开始平移大图像

Question

我正在使用答案 here 中发布的代码使用 mousedown 平移大图像，放置在另一个具有透明度的图像下方的 div 中。无需缩放。该代码对我来说工作正常，只是平移从大图像的左上角开始，我希望它从中心点开始，然后向各个方向平移。我对执行此操作所涉及的计算知之甚少，因此非常感谢有关如何计算的一些指示，或者我需要做些什么来指定起点。

jQuery 是:

var clicking = false;
var previousX;
var previousY;

$("#scroll").mousedown(function(e) {
    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});

$(document).mouseup(function() {

    clicking = false;
});

$("#scroll").mousemove(function(e) {

    if (clicking) {
        e.preventDefault();
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
        $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
        $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
        previousX = e.clientX;
        previousY = e.clientY;
    }
});

$("#scroll").mouseleave(function(e) {
    clicking = false;
});

html 是:

<div id="scroll">
  <img src="sampleimg.jpg" class="background" />
</div>
<img src="sampleoverlay.png" class="overlay" />

CSS 是:

#scroll {
  width: 580px;
  height: 620px;
  overflow: hidden;
}

.background {
  width: 100%;
  height: 100%;
}

.overlay {
  width: 100%; 
  height: 100%;
  position: absolute;
  pointer-events: none;
}

抱歉，如果这真的很明显 - 我找不到任何可以回答我的问题的东西，但可能没有一直在寻找正确的东西。

Answer 1

由于您引用的答案使用 overflow:hidden 在 div 上滚动，您只需将 div 滚动到正确的起始位置。您可以通过从 div 的宽度中减去图像的宽度来计算。这为您在 div 的两侧 提供了边距空间，因此我们需要将其除以二。

对高度执行相同操作以找到上边距，然后使用 jQuery 的 scrollTop() 和 scrollLeft() 将您的 div 简单地滚动到该位置。

jsFiddle