Question

我正在寻找一个无尽的横向新闻风格自动收报机。我玩过SmoothScroll和SimpleDivScroll。

SmoothScroll似乎不适用于不同宽度的元素，SimpleDivScroll只与jQuery 1.4+兼容，而且我坚持使用jQuery 1.3.2。

还有其他选择吗？

Answer 1

试试这个：

Answer 2

这是一个简单的自动收报机。我没有在所有浏览器中测试它。

<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>

Answer 3

您可以尝试jQuery webTicker它是唯一一个在整个列表完成后不停止滚动的人。因为它不断旋转你的物品。每页可以使用多个，并且每个都独立地设置样式。页面本身也提供了CSS样本

它尚未经过jQuery 1.3测试，但它与jQuery 1.4,1.5和1.6完全兼容

Answer 4

你见过liScroll吗？根据“无穷无尽”的含义，它可能会满足您的需求（最后一项与环绕之间存在差距）。

Answer 5

有jQuery.Marquee插件。许可证：ISC。

其他可用的插件列在https://plugins.jquery.com/tag/ticker/。

无尽的水平jQuery自动收报机

5 个答案: