我有一系列div在水平线上浮动到无限远.我有一个固定宽度的div容器,溢出:隐藏.最后,我想按左右两侧的div /按钮滚动项目(使用滚动条).
我无法让.animate()工作.我希望每次单击都可以移动列表中的项目.
它应该类似于亚马逊“购买此物品的顾客”列表,您可以以相同的方式滚动.我很想尝试使用.mousedown并让它在移动时移动(类似于真正的滚动)但是想要先做更简单的方法.
这是小提琴和代码:
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