10

我正在创建一个非常酷的图像查看器，但被困在一个特定的部分：放大时平移图像。这似乎是一个微不足道的问题，我已经尝试了几乎所有关于 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：请在火狐或Webkit浏览器中尝试链接

4

2 回答 2

18

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

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

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

于 2011-11-10T23:02:58.720 回答
1

我为您的工作提供了一些替代插件。试试这些 jquery 插件。

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

于 2014-02-27T06:41:26.627 回答