单行滑动div

时间:2013-10-08 17:54:21

标签: jquery css

如何在按钮左/右键单击中使div单行滑动?
类似于this 画廊底部的部分

这是我在JSFiddle

中的尝试
$( "#right" ).click(function() {
    $( ".block" ).animate({ "left": "+=50px" }, "slow" );
    });
    $( "#left" ).click(function(){
    $( ".block" ).animate({ "left": "-=50px" }, "slow" );
    });

1 个答案:

答案 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.boxdisplay: inline-block类中的.block。< / p>