如何使用jQuery正确平移大于其容器的图像？ [英] How can I pan an image larger than its container correctly using jQuery?

问题描述

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

I'm creating quite a cool image viewer but am stuck in one particular part: panning the image when zoomed in. It seems a trivial problem and I've tried out pretty much all answers to similar questions on SO, but each time, something isn't working right. I need a fresh pair of eyes.

我在我的开发服务器上暂时打开了一个URL。看看这个页面：

I've temporarily opened a URL on my dev server. Have a look at this page:

[URL关闭]

接下来，向上移动鼠标滚轮触发变焦。我们到了。放大后，单击并拖动以尝试平移图像。它正在平移，但有些事情是不对的。这是目前用于平移的代码：

Next, move up your mouse wheel to trigger the zoom. Here we are. Once zoomed in, click and drag to try and pan the image. It is panning alright, but something isn't right. This is currently the code used for the panning:

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;
    }
});

我正在寻找的解决方案具有以下特点：

The solution I'm looking for has these characteristics:

• 在X和Y轴上正确平移方向


• 不应该在图像边缘外平移


• 合理流利的平移


• 很高兴：窗口调整大小不会导致任何问题

• Correct direction of panning over the X and Y axis
• It should not be possible to pan outside the edges of the image
• Reasonably fluent panning
• Nice to have: window resize should not cause any issues

虽然我感谢我能得到的任何帮助，但请不要指向我的通用插件，我已经尝试了太多，我正在寻找适用于我特定场景的答案。我非常绝望，我甚至会为满足上述特征的完美解决方案设置奖金。

Although I appreciate any help I can get, please don't point me to a generic plugin, I've tried too many of them that I am in search of an answer that works for my specific scenario. I'm so desperate I'll even set a money bounty for the perfect solution that meets the characteristic above.

PS：请试试Firefox或Webkit浏览器中的链接

PS: Please try the link in Firefox or a Webkit browser

推荐答案

我已经组建了一个jsFiddle，它可以完成我认为您希望它做的事情。

I have put together a jsFiddle which does what I think you want it to do.

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

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

It satisfies all 4 of your criteria. Let me know if I have misinterpreted your expected result

这篇关于如何使用jQuery正确平移大于其容器的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！