In questo articolo creeremo, partendo da zero, una finestra contenente un elenco di news che in sequenza appariranno a video con un effetto a dissolvenza(fade).
Utilizzeremo jQuery esclusivamente per gestire le animazioni e grazie a Javascript realizzeremo le funzioni necessarie per implementare la nostra finestra delle news. Per completare l’opera e dare al box la parvenza di finestra, forniremo una semplice barra del titolo compresa di icona per la chiusura della finestra.
In fondo all’articolo è possibile provare e scaricare il codice completo.

Vediamo innanzitutto la parte html che oltre ad essere molto semplice ci fornisce una prima idea di come sarà il nostro news ticker:

<div id='box'>
     <div id='intestazione'>
          <div id='titolo'>Le News</div>
          <img id='chiudi' src='chiudi.png' border='0' alt='Chiudi' align='right'/>
     </div>
     <p>... Testo della news numero 1 ...</p>
     <p>... Testo della news numero 2 ...</p>
     <p>... Testo della news numero 3 ...</p>
     <p>... Testo della news numero 4 ...</p>
</div>

La regola per riempire il box è semplice:
il testo di ciascuna news è in un paragrafo (<p>) diverso.
Questa sintassi va necessariamente rispettata perchè solo in questo modo Javascript sarà in grado di leggere il contenuto del box riconoscendo le news che lo compongono.
All’interno del paragrafo siamo liberi di definire link, immagini o oggetti oltre al classico testo.
Passiamo quindi al codice Javascript che si compone essenzialmente di 5 funzioni. Il numero di funzioni non deve spaventare, infatti alcune di esse si compongo di poche righe. Tale scelta nasce dall’esigenza di suddividere e organizzare il codice in maniera logica e funzionale.

// VELOCITA' TRANSIZIONE NEWS (ESPRESSA IN SECONDI)
var speed = 5;

// VARIABILI GLOBALI (NOTIZIE SARA' L'ARRAY CHE CONTERRA' LE NEWS)
var index = 0;
var limite = 0;
var notizie = null;
var rotazione = null;

// FUNZIONE DA CHIAMARE ALLO START DEL BOX NEWS
function start(id_div){
	var box = document.getElementById(id_div);
	$(box).mouseenter(function(){stop();});
	$(box).mouseleave(function(){play();});
	$('#chiudi').click(function(){ $(box).fadeOut();});
	notizie = box.getElementsByTagName('p');
	limite = notizie.length;
	inizializzazione(notizie);
	newsIn();
}
// FUNZIONE NECESSARIA ALL'INIZIALIZZAZIONE
function inizializzazione(elementi){
	for(i=0; i<elementi.length; i++){
		elementi[i].style.display='none';
	}
}
// FUNZIONE PER NEWS IN INGRESSO
function newsIn(){
	rotazione = setTimeout('newsOut()', (speed*1000));
	$(notizie[index]).fadeIn(1000);
}
// FUNZIONE PER NEWS IN USCITA
function newsOut(){
	$(notizie[index]).fadeOut(1000, function(){
		index++;
		if(index==limite){
			index = 0;
		}
		newsIn();
	});
}
// FUNZIONE PER LO STOP DELL'ANIMAZIONE (ATTIVA AL PASSAGGIO DEL MOUSE)
function stop(){
	clearTimeout(rotazione);
}
// FUNZIONE PER LA RIPARTENZA DELL'ANIMAZIONE (ATTIVA AL PASSAGGIO DEL MOUSE)
function play(){
	clearTimeout(rotazione);
	rotazione = setTimeout('newsOut()', 1000);
}

Il codice è abbastanza commentato.
La funzione da invocare per dare inizio all’animazione è: start(id_div).
Tale funzione, con il supporto di altre funzioni e variabili globali, ha il compito di individuare la finestra delle news tramite id, prelevare i testi delle news e realizzare un array, notizie, che li conterrà. Inoltre la funzione ha il compito di assegnare, tramite jQuery, delle funzioni agli eventi legati al movimento del mouse sulla finestra.
Infatti le funzioni stop() e start() vengono richiamate quando l’utente entra e esce con il puntatore del mouse dalla finestra o per interrompere l’animazione favorendo la lettura della news o per farla ripartire.
Le funzioni newsIn() e newsOut() effettuano lo “scambio” delle news utilizzando l’effetto fade fornito da jQuery.
Da notare infine la temporizzazione che unisce le due funzioni sopracitate, gestibile tramite la varibile speed all’inizio del codice.

Per avviare la finestra con le news è necessaria la seguente riga Javascript dopo aver definito il div nell’html:

<script type='text/javascript'>
     start('box');
</script>

Come si potrà vedere dal codice completo presente online e scaricabile da questa pagina, la finestra è stata formattata con alcune semplici regole CSS che chiunque può personalizzare per adattare il layout a quello del proprio sito.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.