Question

我在一个小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>

演示：http://jsfiddle.net/john_bale96/C26rV/

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

Answer 1

请勿更改所有4 top right bottom left，因为您最终会收到right:1000px; left:1000px;等内容... ...可能会破坏这件事。

专注于仅使用其中的2个，我建议您只使用top和left

所以，为了向右走，你要做left += 50px左转你做left -= 50px

解决此解决方案的一种简单方法是简单地手动绘制这样的约束：

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

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

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

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

http://jsfiddle.net/C26rV/4/

但理想情况下，您可以做一些更好的事情，这将决定图像本身的尺寸，使其能够自动处理任何图像尺寸。

修改

正如旁注（它没有约束），您可以通过处理滑动来使用相当少的jQuery：

$('.slide').click(function () { var sliding = {} sliding[$(this).data('direction')] = $(this).data('movement'); $('.inner img').animate(sliding,"slow"); });

http://jsfiddle.net/C26rV/2/

Answer 2

您必须首先考虑的是，您的图片为left:0px和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 以完整的例子。

Answer 3

基本方法是将图像位置与包含div位置进行比较：

    var inner = $(".inner").first();
    var divTop = inner.offset().top;
    var divLeft = inner.offset().left;
    var divRight = divLeft + inner.width();
    var divBottom = divTop + inner.height();

    function getImagePosition() {
        var image = $("#image");
        var imageTop = image.offset().top;
        var imageLeft = image.offset().left;

        return {
            top: imageTop,
            left: imageLeft,
            right: imageLeft + image.width(),
            bottom: imageTop + image.height()
        }
    }

    function scrollTop() {
        var imagePosition = getImagePosition();

        var nextImageTop = imagePosition.top + 50;
        if (nextImageTop <= divTop) {
            $('.slide-top').off("click");

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

    $('.slide-top').click(scrollTop);

您还应该在动画发生时取消绑定箭头滚动事件，否则如果用户在动画发生时多次单击，它仍然可以在div约束之外滚动图像。

看到这个小提琴（我只为顶部实现了重新绑定）：

http://jsfiddle.net/lhoeppner/puLDd/

Answer 4

另一个建议，使用jQuery UI draggable。

http://jqueryui.com/draggable/

http://jsfiddle.net/kimgysen/3twxS/1/

$("#inner").draggable({
    containment: $('#content')
});

在div中滚动大图像

4 个答案: