4

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

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

4

4 回答 4

1

您必须考虑，一开始，您的图像是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。

于 2013-10-18T13:05:35.300 回答
1

基本方法是将图像位置与包含的 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/

于 2013-10-18T13:10:22.407 回答
1

另一个建议，使用 jQuery UI 可拖动。

http://jqueryui.com/draggable/

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

$("#inner").draggable({
    containment: $('#content')
});
于 2013-10-18T13:22:26.517 回答
1

不要改变所有 4 top right bottom left，因为你最终会得到诸如right:1000px; left:1000px;etc 之类的东西......而且它可能会破坏事情。

专注于只使用其中的 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/

于 2013-10-18T12:41:26.733 回答