在div内滚动大图像

我在一个小 div 内有一个大图像。该 div 内有 4 个箭头来控制移动：右、下、左、上。箭头用于在较小的 div 内移动图像。

这是JS代码

$('.slide-right').click(function() {
    $('.inner img').animate({ "right": "+=50px" }, "slow" );
});
$('.slide-bottom').click(function() {
    $('.inner img').animate({ "bottom": "+=50px" }, "slow" );
});
$('.slide-left').click(function() {
    $('.inner img').animate({ "left": "+=50px" }, "slow" );
});
$('.slide-top').click(function() {
    $('.inner img').animate({ "top": "+=50px" }, "slow" );
});

这是 HTML：

<div id="content">
    <div class="image-box">
        <div class="inner"><img alt="" src="http://s15.postimg.org/5phzr2off/img.jpg" id="image" /></div>
        <div id="arrow-up"><a href="javascript:void(0);" class="slide-top"><img alt="" src="http://s24.postimg.org/gr2uv14d1/arrow_top.png" /></a></div>
        <div id="arrow-right"><a href="javascript:void(0);" class="slide-right"><img alt="" src="http://s24.postimg.org/ruda95avp/arrow_right.png" /></a></div>
        <div id="arrow-bottom"><a href="javascript:void(0);" class="slide-bottom"><img alt="" src="http://s10.postimg.org/n8hv0166x/arrow_bottom.png" /></a></div>
        <div id="arrow-left"><a href="javascript:void(0);" class="slide-left"><img alt="" src="http://s2.postimg.org/qrpm662u1/arrow_left.png" /></a></div>
    </div>
</div>

Demo: http://jsfiddle.net/john_bale96/C26rV/ http://jsfiddle.net/john_bale96/C26rV/

我想让动画在到达图像边缘时停止。有人可以给我一些关于如何做到这一点的线索吗？

你必须考虑到，一开始你的形象是left:0px and top:0px。 所以你已经有了左侧和顶部的限制。

$('.slide-left').click(function () {
    if ($('.inner img').position().left + 50 < 0) {
        $('.inner img').animate({
            "left": "+=50px"
        }, "slow");
    } 
});

$('.slide-top').click(function () {
    if ($('.inner img').position().top + 50 < 0) {
        $('.inner img').animate({
            "top": "+=50px"
        }, "slow");
    } 
});

然后，您可以获得右限和下限。这是您的图像尺寸。

var limiteRight = 0 - $('.inner img').width() + $('.image-box').width();
var limiteBottom = 0 - $('.inner img').height() + $('.image-box').height();


$('.slide-right').click(function () {
    if ($('.inner img').position().left - 50 > limiteRight) {
        $('.inner img').animate({
            "left": "-=50px"
        }, "slow");
    }
});

$('.slide-bottom').click(function () {
    if ($('.inner img').position().top - 50 > limiteBottom) {
        $('.inner img').animate({
            "top": "-=50px"
        }, "slow");
    }
});

最后你必须检查你想要的新位置是否在这个容器内。如果没有，那就到极限吧。

$('.slide-right').click(function () {
    if ($('.inner img').position().left - 50 > limiteRight) {
        $('.inner img').animate({
            "left": "-=50px"
        }, "slow");
    } else {
        $('.inner img').animate({
            "left": limiteRight
        }, "slow");
    }
});

FIDDLE http://jsfiddle.net/QaTDG/有完整的例子。