无尽的水平 jQuery 自动收报机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3456381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Endless horizontal jQuery ticker
提问by digital
I'm looking for an endless horizontal news style ticker. I've played around with SmoothScroll and SimpleDivScroll.
我正在寻找一个无休止的横向新闻式自动收报机。我玩过 SmoothScroll 和 SimpleDivScroll。
SmoothScroll doesn't seem to work well with elements of different widths and SimpleDivScroll is only compatible with jQuery 1.4+ and I'm stuck with jQuery 1.3.2.
SmoothScroll 似乎不适用于不同宽度的元素，SimpleDivScroll 仅与 jQuery 1.4+ 兼容，而我坚持使用 jQuery 1.3.2。
Any other alternatives?
还有其他选择吗？
采纳答案by bangbambang
回答by Joyce Babu
Here is a simple ticker. I haven't tested it in all browsers.
这是一个简单的代码。我还没有在所有浏览器中测试过。
<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>
回答by Jon Mifsud
You can try the jQuery webTickerit is the only one to not stop the scrolling after the whole list completes. As it continously rotates your items. You can use multiple ones per page and style each one indipendently. A CSS sample is also provided on the page itself
您可以尝试使用jQuery webTicker，它是唯一一个在整个列表完成后不停止滚动的工具。因为它会不断旋转您的物品。您可以在每页上使用多个，并单独设置每个样式。页面本身还提供了一个 CSS 示例
It has not been tested with jQuery 1.3 however its fully compatible with jQuery 1.4,1.5 and 1.6
它尚未使用 jQuery 1.3 进行测试，但它与 jQuery 1.4、1.5 和 1.6 完全兼容
回答by koppor
There is the jQuery.Marqueeplugin. License: ISC.
有jQuery.Marquee插件。许可证：ISC。
Other available plugins are listed at https://plugins.jquery.com/tag/ticker/.
其他可用插件在https://plugins.jquery.com/tag/ticker/中列出。
