Sto cercando un ticker di notizie orizzontale senza fine. Ho giocato con SmoothScroll e SimpleDivScroll.Ticker orizzontale infinito jQuery ticker
SmoothScroll non sembra funzionare bene con elementi di larghezza diversa e SimpleDivScroll è compatibile solo con jQuery 1.4+ e sono bloccato con jQuery 1.3.2.
Altre eventuali alternative?
Prova questo:
Ecco un semplice ticker. Non l'ho provato su tutti i browser.
<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>
Hai visto liScroll? A seconda di cosa intendi per "infinito", potrebbe fare ciò che ti serve (c'è uno spazio tra l'ultimo elemento e l'involucro).
e dichiara di funzionare con JQuery 1.2.xo successivo. –
È possibile provare lo jQuery webTicker è l'unico a non interrompere lo scorrimento dopo che l'intero elenco è stato completato. Ruotando continuamente i tuoi oggetti. Puoi usarne più per pagina e assegnare uno stile a ciascuno in modo indipendente. Un campione CSS è prevista anche nella pagina stessa
Non è stato testato con jQuery 1.3 tuttavia la sua pienamente compatibile con jQuery 1.4,1.5 e 1,6
C'è il plugin jQuery.Marquee. Licenza: ISC.
Altri plug-in disponibili sono elencati allo https://plugins.jquery.com/tag/ticker/.
Quando dici infinito, vuoi continuare a visualizzare nuovi dati? O vuoi che visualizzi una quantità limitata di dati precedentemente definita che si avvolge in modo che possa continuare a scorrere da destra a sinistra? – Thomas
Quantità finita di dati definita in precedenza che si riavvolge nuovamente. – digital
Vedere https://plugins.jquery.com/tag/ticker/ per una panoramica di tutti i plugin ticker disponibili per jQuery. – koppor