jQuery水平滚动(点击和动画)

前端之家收集整理的这篇文章主要介绍了jQuery水平滚动(点击和动画)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一系列div在水平线上浮动到无限远.我有一个固定宽度的div容器,溢出:隐藏.最后,我想按左右两侧的div /按钮滚动项目(使用滚动条).

我无法让.animate()工作.我希望每次单击都可以移动列表中的项目.

它应该类似于亚马逊“购买此物品的顾客”列表,您可以以相同的方式滚动.我很想尝试使用.mousedown并让它在移动时移动(类似于真正的滚动)但是想要先做更简单的方法.

这是小提琴和代码

http://jsfiddle.net/stfzy/16/

HTML:

<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
    <div class='list'>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class="item">
        </div>
    </div>
</div>

CSS:

#container{
width:340px;
    height:50px;
}

#list-container {
overflow:hidden;    
width: 300px;  
float:left;    
}

.list{
    background:grey;
min-width:700px;
    float:left;
}


#arrowR{
background:yellow;
    width:20px;
    height:50px;
    float:right;
    cursor:pointer;
}


#arrowL{
background:yellow;
    width:20px;
    height:50px;
    float:left;
    cursor:pointer;
}

.item{
    background:green;
width:140px;
    height:40px;
    margin:5px;
    float:left;
}

jQuery的

$(document).ready(function() {

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'-=300px'});

    });

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'+=300px'});

    });

});

任何和所有帮助赞赏.谢谢!

解决方法

添加位置:相对于.item,如下:
.item{
    background:green;
    width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative; /* Put me here! */
}

工作示例:http://jsfiddle.net/mattblancarte/stfzy/21/

您的设置中还有一些错误,但这应该会让您失意. 原文链接:https://www.f2er.com/jquery/181540.html

猜你在找的jQuery相关文章