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

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

我已经在我的开发服务器上临时打开了一个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浏览器中的链接

我已经制作了一个JSFIDLE，它可以完成我认为您希望它完成的任务

---

它满足您的所有4个标准。如果我误解了您的预期结果，请告诉我，我有一些可供您选择的插件。试试这些jquery插件

---

您能描述一下什么不起作用，并提供一把小提琴吗？根据我的说法，在没有缩放的情况下，图像在平移方面已经存在一些问题。我之前创建了一个背景平移脚本，只需移动鼠标，请参阅以获取灵感。@RobW谢谢，但使用背景图像的方法将是整个过程的一次重大改革，依赖性太多，我想将此功能全部删除。我希望可以用滚动的方法来修复它。正如你在我的小提琴中看到的，平移并不困难，而且可以有效地完成。您的问题可能是由于编写代码时没有事先考虑如何有效地实现它。通过使用适当的逻辑和

background size

CSS属性，可以轻松地进行缩放。我已经实现了平移。将这两个功能添加在一起将产生所需的功能。如果你提供一些相关的代码，我可以考虑看看它。你可以发布你的HTML/CSS吗？你的url现在是关闭的，没有html和css，我只是猜测。非常感谢！非常感谢。抱歉耽搁了。我使用了您的代码，甚至将其部署到了生产环境中：它工作正常，但平移仍然存在一个问题：放大时，我似乎无法平移到图像的外边缘，它似乎被裁剪了。有什么想法吗？我看不到你的javascript，因为它都被缩小了，所以这完全是猜测，但看起来在放大的过程中，你将图像的左部分从文档的左边界推出，而它似乎不想平移文档viewportAh的左边界，忘记了缩小。这是原始js：看起来css3转换与平移算法的配合不太好。如果需要，请尝试使用jquery.animate缩放宽度和高度possible@noobie-php setInterval以指定为第二个参数的延迟间隔（以毫秒为单位）连续执行给定函数。它返回一个intervalID，您可以使用它通过调用clearInterval（intervalID）来停止间隔执行。在我创建的代码中，它执行一个函数，当mousedown偶数触发时，它每50毫秒滚动一次div，并在mouseup事件触发时清除间隔。更多信息可以在这里找到。