在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" );
}
});
但是理想情况下,您可以做得更好,这将确定图像本身的尺寸,从而使其可以自动处理任何图像尺寸.
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");
});
这篇关于在div中滚动大图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!