如何使用 jQuery 正确平移大于其容器的图像？

Question

我正在创建一个非常酷的图像查看器，但卡在一个特定的部分：放大时平移图像。这似乎是一个微不足道的问题，我已经尝试了几乎所有类似问题的答案，但每次都会出现一些问题工作不正常。我需要一双新鲜的眼睛。

我暂时在我的开发服务器上打开了一个 URL。看看这个页面：

[URL 已关闭]

接下来，向上移动鼠标滚轮以触发缩放。我们到了。放大后，单击并拖动以尝试平移图像。平移一切正常，但有些地方不太对劲。这是目前用于平移的代码：

var clicking = false;
var previousX;
var previousY;

$("#bigimage").mousedown(function(e) {

    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});

$(document).mouseup(function() {
    clicking = false;
});

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

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

我正在寻找的解决方案具有以下特征：

• 在 X 和 Y 轴上平移的正确方向
• 不可能平移到图像边缘之外
• 相当流畅的平移
• 很高兴拥有：窗口调整大小不应引起任何问题

虽然我很感谢我能得到的任何帮助，但请不要向我指出通用插件，我已经尝试了太多插件，我正在寻找适合我的特定场景的答案。我非常绝望，我什至会为满足上述特征的完美解决方案设置奖金。

PS：请在 Firefox 或 Webkit 浏览器中尝试该链接

Answer 1

我已经组装了一个 jsFiddle ，它可以完成我认为你想要它做的事情。

http://jsfiddle.net/CqcHD/2/

它满足您的所有 4 个标准。如果我误解了您的预期结果，请告诉我

Answer 2

我有一些适合你工作的替代插件。尝试一下这些 jquery 插件。

http://kvcodes.com/2014/02/jquery-plugins- for-containerdiv-zoom/