Corsi on-line

Un ticker in poche righe di codice con jQuery

In questo breve post vedremo come sia possibile creare rapidamente un semplice news ticker, cioè un contenitore per lo scorrimento delle notizie all’interno di una pagina Web, utilizzando jQuery e poche righe di codice; nello specifico, il nostro ticker permetterà di visualizzare 4 news alla volta, ciascuna di esse rimarrà in cima alla lista per un periodo di tempo stabilito arbitrariamente dallo sviluppatore.

Ticker

Immaginiamo quindi di avere un elenco di notizie da mostrare ai nostri visitatori, l’ideale sarebbe naturalmente poterle prelevare dinamicamente da una base di dati tramite un linguaggio per lo scripting Server Side, ma nel caso specifico verrà proposto direttamente l’output dei contenuti immerso nel codice HTML:

<div id="page">
	<div class="container">
		<h1>News Ticker con jQuery</h1>
		<ul id="jticker" class="ticker">
			<li>
				<a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. 
			</li>
			<li>
				<a href="#">Fusce accumsan</a> metus quis lacus sodales rutrum. Cras aliquam sed augue eu imperdiet. 
			</li>
			<li>
				<a href="#">Curabitur sit</a> amet diam id nibh venenatis semper a vel sem. Etiam euismod nulla eu sapien consectetur feugiat. 
			</li>
		</ul>
	
	</div>
</div>

Fatto questo potremo passare alla parte più importante dell’applicazione, il codice JavaScript che potremo inserire a fondo pagina, nel markup, prima della chiusura del tag body; naturalmente quest’ultimo dovrà essere preceduto dall’inclusione della libreria jQuery che, nel nostro caso, avverrà tramite CDN ufficiale:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
	function jt(){
		$('#jticker li:first').slideUp( function () { $(this).appendTo($('#jticker')).slideDown(); });
	}
	setInterval(function(){ jt () }, 5000);
</script>

Infine, potremo passare alla definizione delle regole di stile per la formattazione:

<style type="text/css"> 
#ticker {
	height: 40px;
	overflow: hidden;
}
#ticker li {
	height: 40px;
}
.container{
 	width: 500px;
 	margin: 0 auto;
 	padding: 0;
 	overflow: hidden; 
}
</style>

E’ da segnalare che, nel caso in cui si voglia modificare l’intervallo di tempo tra una transizione e l’altra delle news in lista, basterà agire sulla funzione setInterval a cui passare un valore espresso in millisecondi.

Post correlati
I più letti del mese
Tematiche