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

Question

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

我已在我的开发服务器上临时打开了一个 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 个标准。如果我误解了您的预期结果，请告诉我