如何在按钮左/右键单击中使div单行滑动?
类似于this 画廊底部的部分
这是我在JSFiddle
中的尝试$( "#right" ).click(function() {
$( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
$( "#left" ).click(function(){
$( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
答案 0 :(得分:1)
此处已更新 FIDDLE 。
而不是left
属性尝试使用scrollLeft
:
$( "#right" ).click(function() {
$( ".box" ).animate({
scrollLeft: '+=' + $( ".box" ).width()
});
});
$( "#left" ).click(function(){
$( ".box" ).animate({
scrollLeft: '-=' + $( ".box" ).width()
});
});
这给了你很大的好处,你不需要检查框是否会超过最大允许位置。
您还需要修改CSS:
.box {
width: 600px;
background-color: #000;
overflow:hidden;
white-space: nowrap;
}
.block {
display:inline-block;
background-color: #abc;
width: 90px;
height: 90px;
margin: 5px;
margin-left: 10px;
}
此处最重要的事情(对于工作机制至关重要),overflow: hidden
中的white-space: nowrap
,.box
和display: inline-block
类中的.block
。< / p>