使用鼠标平移大图像，从中心开始答案

【问题标题】：Pan a large image using mouse, starting from centre使用鼠标平移大图像，从中心开始
【发布时间】：2013-10-16 11:21:44
【问题描述】：

我正在使用答案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;
}

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

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

jsFiddle

【讨论】：

啊，除了它现在不能在平板电脑上工作，即使实现了触摸打孔。你有什么建议让它工作吗？我尝试将所有鼠标事件也更改为触摸事件。
对不起，我从来没有处理过这个问题。我知道jQuery有一个mobile library，但我从来没有用过。

【解决方案2】：

我相信您可以通过使用触摸事件使这项工作适用于移动设备。我不确定是否需要 touchend 和相当于 mouseleave 的功能，但应该是这样的：

$(document).ready(function(){
var $container = $("#scroll");
var $img = $("#scroll img");
var cHeight = $container.height();
var cWidth = $container.width();
var iHeight = $img.height();
var iWidth = $img.width();

var top = (iHeight - cHeight) / 2;
var left = (iWidth - cWidth) / 2;

$container.scrollLeft(left);
$container.scrollTop(top);
});

var clicking = false;
var previousX;
var previousY;

$("#scroll").bind('touchstart', function(e) {
  e.preventDefault();
  previousX = e.touches[0].clientX;
  previousY = e.touches[0].clientY;
  clicking = true;
});

/* $(document).bind('touchend', function() {

    clicking = false;
}); */

$("#scroll").bind('touchmove', function(e) {
  if (clicking) {
    e.preventDefault();
    var directionX = (previousX - e.touches[0].clientX) > 0 ? 1 : -1;
    var directionY = (previousY - e.touches[0].clientY) > 0 ? 1 : -1;

    container.scrollLeft(container.scrollLeft() + (previousX - e.touches[0].clientX));
    container.scrollTop(container.scrollTop() + (previousY - e.touches[0].clientY));

    previousX = e.touches[0].clientX;
    previousY = e.touches[0].clientY;
  }
});

jsFiddle （除非您能以某种方式使其模仿移动设备，否则小提琴不起作用 - 我不确定如何）

【讨论】：