How can I pan an image larger than its container correctly using jQuery?

问题

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.

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

[URL closed]

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:

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: Please try the link in Firefox or a Webkit browser

回答1:

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

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

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

回答2:

i have some alternative plugins for your work . try among these jquery plugins.

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

来源：https://stackoverflow.com/questions/8027779/how-can-i-pan-an-image-larger-than-its-container-correctly-using-jquery

标签

jquery

image

pan