Endless horizontal jQuery ticker
I'm looking for an endless horizontal news style ticker. I've played around with SmoothScroll 开发者_开发百科and 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.
Any other alternatives?
Try this:
jQuery Twitter Marquee by Takien
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>
You can try the jQuery webTicker it 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
It has not been tested with jQuery 1.3 however its fully compatible with jQuery 1.4,1.5 and 1.6
Have you seen liScroll? Depending on what you mean by "endless", it might do what you need (there is a gap between the last item and the wraparound).
There is the jQuery.Marquee plugin. License: ISC.
Other available plugins are listed at https://plugins.jquery.com/tag/ticker/.
加载中,请稍侯......
精彩评论