Estoy buscando un ticker de estilo de noticias horizontales sin fin. He jugado con SmoothScroll y SimpleDivScroll.Marcador jQuery horizontal sin fin
SmoothScroll no parece funcionar bien con elementos de diferentes anchuras y SimpleDivScroll solo es compatible con jQuery 1.4+ y estoy atascado con jQuery 1.3.2.
¿Alguna otra alternativa?
Prueba esto:
Aquí hay un ticker simple. No lo he probado en todos los navegadores.
<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>
Ha visto liScroll? Dependiendo de lo que quiera decir con "interminable", podría hacer lo que necesite (hay un espacio entre el último elemento y el envolvente).
y afirma que funciona con JQuery 1.2.xo posterior. –
Puede probar el jQuery webTicker, es el único que no detiene el desplazamiento una vez completada toda la lista. A medida que gira continuamente sus artículos. Puede usar múltiples por página y diseñar cada uno de forma independiente. Una muestra CSS también se proporciona en la propia página
No ha sido probado con jQuery 1.3 sin embargo, su totalmente compatible con jQuery 1.4,1.5 y 1.6
Existe la jQuery.Marquee plugin. Licencia: ISC.
Otros complementos disponibles se enumeran en https://plugins.jquery.com/tag/ticker/.
Cuando diga interminable, ¿desea que continúe extrayendo nuevos datos para mostrar? ¿O desea que muestre una cantidad finita de datos definida previamente que se envuelve para que pueda seguir desplazándose de derecha a izquierda? – Thomas
Cantidad finita previamente definida de datos que se envuelve nuevamente. – digital
Consulte https://plugins.jquery.com/tag/ticker/ para obtener una descripción general de todos los complementos de ticker disponibles para jQuery. – koppor