无限的水平jQuery报价器
无限的水平jQuery报价器
提问于 2010-08-11 15:55:41
我正在寻找一个无休止的水平新闻风格的报价器。我和SmoothScroll和SimpleDivScroll玩过。
SmoothScroll似乎不能很好地处理不同宽度的元素，而SimpleDivScroll只与jQuery 1.4+兼容，而我坚持使用jQuery 1.3.2。
还有别的选择吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2010-10-08 23:23:57
Stack Overflow用户
发布于 2010-10-06 18:30:29
这是一个简单的报价器。我还没有在所有的浏览器中测试过它。
<html>
<head>
<title>Horizontal scroller</title>
<style type="text/css">
#scroller{height:100%;margin:0;padding:0;line-height:30px;position:relative;}
#scroller li{float:left;height:30px;padding:0 0 0 10px;list-style-position:inside;}
#scrollerWrapper{height:30px;margin:30px;overflow:hidden;border:1px #333 solid;background:#F2F2F2;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var speed = 5;
var items, scroller = $('#scroller');
var width = 0;
scroller.children().each(function(){
width += $(this).outerWidth(true);
});
scroller.css('width', width);
scroll();
function scroll(){
items = scroller.children();
var scrollWidth = items.eq(0).outerWidth();
scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
}
function changeFirst(){
scroller.append(items.eq(0).remove()).css('left', 0);
scroll();
}
});
</script>
</head>
<body>
<div id="scrollerWrapper">
<ul id="scroller">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li> Maecenas sollicitudin, ante id ultrices consectetur, ipsum nisl varius ipsum, sit amet congue eros nulla vitae urna.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li>
</ul>
</div>
</body>
</html>Stack Overflow用户
发布于 2011-12-07 21:25:34
您可以尝试jQuery webTicker，它是唯一一个在整个列表完成后不停止滚动的。因为它会不断地旋转你的物品。您可以在每个页面上使用多个样式，并对每个样式分别设置样式。页面本身也提供了一个CSS示例
它尚未在jQuery 1.3上进行测试，但它与jQuery 1.4、1.5和1.6完全兼容
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3456381
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号