滚动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') 
});