在div中滚动大图像 [英] Scrolling large image inside a div

问题描述

我在一个小div内有一个大图像.在该div内，有4个箭头来控制运动，即右，下，左和上.箭头用于在较小的div范围内移动图像.

I have an large image inside a small div. Inside that div there are 4 arrows to control the movement, right, bottom, left and top. The arrows are used to move the image inside that smaller 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/

我想使动画在到达图像边缘时停止播放.有人可以给我一些如何做的线索吗?

I would like to make the animation to stop when the edge of the image is reached. Can someone give me some clues on how to do this ?

推荐答案

不要全部更改4个top right bottom left，因为您最终会看到诸如right:1000px; left:1000px;之类的东西. ..这很可能会破坏事情.

Don't change all 4 top right bottom left, as you'll end up with stuff like right:1000px; left:1000px; etc... and it'll probably break the thing.

重点只使用其中2个，我建议只使用top和left

Focus on using just 2 of them instead, i'd recommend just using top and left

所以向右走，你会做left += 50px向左走，你会做left -= 50px

So to go right, you'd do left += 50px to go left you'd do left -= 50px

解决此问题的一种简单方法是简单地手动绘制约束，如下所示:

A simple way to resolve this solution would be to simply manually plot the contraints like this:

$('.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/

但是理想情况下，您可以做得更好，这将确定图像本身的尺寸，从而使其可以自动处理任何图像尺寸.

But ideally you could do something better which would determine the dimensions of the image itself allowing it to work with any image size automatically.

作为一个附带说明(它没有约束)，您可以通过处理以下滑动操作来使用更少的jQuery:

Just as a side note (It doesn't have constraints) you can use considerably less jQuery by handling sliding like this:

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

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

这篇关于在div中滚动大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！