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