滾動div內的大圖像

Question

我在小格子裏面有一個大圖像。在該格內有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 toprightbottomleft，因爲你會用的東西落得像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"); 
    } 
}); 

而你finnaly必須檢查，如果你想要的新位置是在這個容器內。如果沒有，只要去限制。

$('.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拖動。

http://jqueryui.com/draggable/

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

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