Più volte ci siamo soffermati sulle modalità con cui Javascript gestisce l'animazione del testo. La raccolta di script gratuiti di HTML.it comprende quasi 20 esempi di questi tipo presso la pagina https://www.html.it/jscript/scrolling
Lo script che presentiamo, dunque, potrebbe apparire una inutile ripetizione se non fosse per il suo diverso funzionamento e per il suo effetto grafico molto più gradevole.
Lo script si compone di immagini, che tramite il codice Javascript che andremo ad analizzare, producono testo a scorrimento orizzontale simile ai display luminosi di insegne o areoporti.
L'esempio si compone di 76 file:
- I file da 32.gif a 163.gif
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Non fatevi impressionare dal numero di immagini .gif perchè si tratta delle lettere alfabetiche e dei numeri necessari alla corretta visualizzazione del testo.
Il file esempio.htm simula la pagina all'interno della quale vogliamo inserire l'effetto; parte del codice va inserita tra i campi <head> del documento e parte nel corpo dello stesso.
Tra i campi <head> va inserito il seguente codice:
<script type="text/javascript" language="javascript">
var imagepath=""
var text="HTML.it - il sito italiano sul Web publishing";
var nc=8;
var spd=130;
var count=0;
var offs=0;
var preloadimages=new Array()
for (p=32;p<=163;p++){
preloadimages[p]=new Image()
preloadimages[p].src=imagepath+p+".gif"
}
function startscroll() {
action=window.setInterval("go()",spd);
}
function go() {
strd=text.substr(offs,(count+1));
var str=strd.substr(0,nc);
if (count>(nc-2) && str.length<nc) {
chopping off
var se=(nc-len);
while (str.length<nc) {
str=str+" ";
se+=1;
}
}
len=str.length;
var c=0;
while (c<len) {
r=str.substr(c,1);
g=r.charCodeAt(0);
chr=eval('document.c'+((nc+1)-len+c));
chr.src=imagepath+g+".gif";
c+=1;
}
count+=1;
if (count>=nc) {
offs+=1;
}
if (count>(text.length+(nc-1))) {
count=0;
offs=0;
}
}
</script>
var imagepath=""
indica il percorso dal quale vengono raggiunte le immagini. Per esempio, se le immagini fossero inserite nella directory image, il percorso dovrebbe essere var imagepath="img/".
Se non viene stabilito nulla le immagini si ritengono depositate nella stessa directory dello script.
var text="HTML.it - il sito italiano sul Web publishing";
Questa variabile contiene il testo che si intende visualizzare all'interno dello scroller.
var spd=130;
La velocità di ogni singolo fotogramma di scroller espressa in millisecondi.
Il codice successivo non va modificato in nessuna parte.
Prima di passare al codice da inserire nel corpo del documento è fondamentale inserire all'interno del tag <body> un richiamo al gestore di eventi onload:
<body onload="startscroll();">
senza il quale l'effetto non si produce.
Fatto questo non ci resta che inserire il seguente codice nel punto della pagina che desideriamo:
<img src="32.gif" width="28" height="38" name="c1"/>
<img src="32.gif" width="28" height="38" name="c2"/>
<img src="32.gif" width="28" height="38" name="c3"/>
<img src="32.gif" width="28" height="38" name="c4"/>
<img src="32.gif" width="28" height="38" name="c5"/>
<img src="32.gif" width="28" height="38" name="c6"/>
<img src="32.gif" width="28" height="38" name="c7"/>
<img src="32.gif" width="28" height="38" name="c8"/>
Si tratta di semplici immagini affiancate le une alle altre che richiamano, con l'attributo name="", lo script impostato in precedenza.
