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

我正在创建一个非常酷的图像查看器,但我陷入了一个特定的部分：在放大时平移图像.这似乎是一个微不足道的问题,我已经尝试了几乎所有关于SO的类似问题的答案,但每一次,某事工作不对.我需要一双新鲜的眼睛.

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

解决方法

我已经把一个jsfiddle放在一起,它做了我认为你想要它做的事情.

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

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

原文地址：https://www.jb51.cc/jquery/178356.html