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

jQuery UI ドラッグ可能を使用する別の提案。

http://jqueryui.com/draggable/

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

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