News scorrevoli con jQuery

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Attraverso poche righe di codice e con un pizzico di fantasia possiamo, grazie a jQuery, creare un sistema di news scorrevoli dall'alto verso il basso, con un gradevole effetto slide.

Immaginiamo di avere un box con cinque news, ma ne mostriamo solo tre: avremo immediatamente visibili la notizia 1, la 2 e la 3; dopo il primo slide vedremo la 2, la 3 e la 4; dopo ancora la 3, la 4 e la 5; quindi la 4, la 5, di nuovo la 1 e così via.

Per provare a chiarire il concetto relativamente a ciò che intendiamo andare a creare, vediamo una serie di fotogrammi. Nel primo vediamo il nostro newsticker al caricamento della pagina:

Vediamo quindi cosa succede nel momento dello slide:

Ed ecco il box una volta che il primo slide è stato completato.

Inutile dire che l'effetto rende molto meglio se eseguito in una pagina Web che non con degli screenshot statici.

Passiamo al codice, iniziando dalla porzione HTML che stampa a video il contenuto del box:

<div id="box">
	<div>Riga numero 1</div>
	<div>Riga numero 2</div>
	<div>Riga numero 3</div>
	<div>Riga numero 4</div>
	<div>Riga numero 5</div>
</div>

Abbiamo quindi un livello di testo a cui assegniamo ID "box" e, al suo interno, avremo una serie di altri livelli che contrassegnano le singole news (nell'esempio non sono presenti link, ma è possibile aggiungerne semplicemente attraverso le ancore HTML).

Passiamo alla stilizzazione del box, evidenziando in grassetto i due comandi essenziali al funzionamento del nostro sistema:

<style type="text/css">
#box
{
	overflow: hidden;
	background: #EEE;
	width: 300px;
	height: 110px;
	padding: 0;
	margin: 0;
}
#box div
{
	font: normal 13px tahoma;
	padding: 10px;
	margin: 0;
}
</style>

Oltre ai colori ed alle spaziature, notiamo che impostiamo su "hidden" il valore dell'"overflow" del box contenitore, quindi specifichiamo un'altezza del box: questo espediente serve a mostrare solo il numero di notizie che intendiamo far visualizzare ai nostri lettori.

Passiamo al motore Javascript del nostro newsticker, richiamando per prima cosa la nostra libreria jQuery, ipotizzando che sia caricata nella stessa posizione del disco in cui andremo ad eseguire lo script:

<script type="text/javascript" src="jquery.js"></script>

Passiamo quindi allo script:

<script type="text/javascript">
function newsticker()
{
	$("#box div:first").slideUp(function(){
		$(this).appendTo($("#box")).show();
	});
}
window.setInterval(function(){ newsticker () }, 3000);
</script>

Creiamo la funzione newsticker() che imposta lo slide verso l'alto del primo elemento e, al contempo, va a mostrare in coda all'elenco l'elemento che è stato nascosto.

Richiamiamo poi la funzione con un intervallo temporizzato, impostato per l'esempio a 3 secondi.

Consiglio, tutt'al più, di aumentare il tempo di slide, ma di non diminuirlo, onde evitare che l'effetto sia fastidioso piuttosto che gradevole agli occhi del navigatore.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (105.572)

:: Breve guida a jQuery (95.499)

:: Le espressioni regolari in Javascript (84.488)

:: Gestione delle stringhe in Javascript (73.450)

:: Stampare una pagina col Dhtml (42.491)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (38.658)

:: Menu orizzontale dinamico in Dhtml (36.791)

:: Gli Array in Javascript (35.520)

:: Temporizzazioni Javascript (30.941)

:: Istruzion condizionali in Javascript: if e switch (28.429)

IN EVIDENZA
DOWNLOAD