Banner scorrevole in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Un'esigenza comune a tutti coloro che si occupano di pubblicità online è rendere visibili i banner sul proprio sito, il più a lungo possibile, onde avere più chances che i propri utenti ci clicchino.

Un sistema del tutto pulito e molto utilizzato sul Web è quello di far scorrere i banner sulla pagina insieme allo scroll della stessa, in modo che, se un banner si trova in alto, quando l'utente scorre la pagina verso il basso, il banner sarà sempre visibile.

Un esempio illustrato:


Notare la barra di scorrimento.

Il banner utilizzato nell'esempio è di dimensioni standard 120X240. Si consiglia di usare allo scopo banner verticali di dimensioni 120X240, 120X600 o 120X600.

Vediamo come fare. Iniziamo con lo scrivere il codice per il richiamo del banner nella pagina:
<div id="BannerDIV">
<a href="#"><img src="banner.gif" border="0"></a>
</div>
Notiamo che il banner è contenuto all'interno di un livello di testo con un ID che useremo per generare dinamicamente il nostro effetto banner scorrevole.

Vediamo lo script che genera il dinamismo:
<script type="text/javascript">
var SB;
function ScrollBanOK()
{
	document.getElementById("BannerDIV").style.position = "absolute";
	document.getElementById("BannerDIV").style.top = document.body.scrollTop;
	document.getElementById("BannerDIV").style.marginTop = "10px";
	document.getElementById("BannerDIV").style.marginLeft = (window.screen.width - 160) + "px";
	SB = window.setTimeout("ScrollBanOK()", 1);
}
function ScrollBanNO()
{
	window.clearTimeout(SB);
}
</script>
Abbiamo due funzioni; la prima fa muovere il banner durante lo scroll di pagina e la seconda lo ferma al termine dello scroll.

All'interno della prima funzione stilizziamo il banner posizionandolo ad una certa distanza dai margini e calcoliamo dinamicamente il posizionamento a destra, adattandolo a qualsiasi risoluzione:
document.getElementById("BannerDIV").style.marginLeft = (window.screen.width - 160) + "px";
Alla funzione che calcola la larghezza dello schermo sottraiamo 120 pixel del banner, 10 pixel di margine dal bordo e 30 pixeal di barra di scorrimento, arrivando cosi a 160 pixel. Nel caso del formato 160X600, dunque, sottrarremo 200 pixel, e cosi via per eventuali altri formati.

Non finisce qui; dobbiamo richiamare le due funzioni e lo facciamo nel tag <body> agli eventi onload ed onunload, come nel seguente codice:
<body onload="ScrollBanOK()" onunload="ScrollBanNO()">
Il tutto è già funzionante, ma attualmente nella pagina c'è solo il banner. Per gustare l'effetto, aggiungere un po di:
<br><br><br><br><br>
dopo il codice del banner.

I più cliccati della sezione Javascript

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

:: Breve guida a jQuery (98.573)

:: Le espressioni regolari in Javascript (84.979)

:: Gestione delle stringhe in Javascript (74.974)

:: Stampare una pagina col Dhtml (42.846)

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

:: Menu orizzontale dinamico in Dhtml (37.183)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.617)

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

IN EVIDENZA
DOWNLOAD