Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

News ticker con effetto macchina da scrivere

Link copiato negli appunti

Lo script che presentiamo è un news ticker che ha la caratteristica principale di mostrare i testi con un effetto "macchina da scrivere".
Il testo, ed eventualmente le immagini, verranno mostrate poco alla volta.
Lo script è compatibile con Explorer e con Netscape 6.x mentre con Netscape 4.x non verrà visualizzato nulla nella pagina.

L'esempio si compone di 1 file:

  • 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.

Tutto il codice va inserito direttamente nel corpo della pagina (nel punto esatto in cui vogliamo posizionare il box delle news):

<div id=ejs_box2_box style="background:#ffffff;color:#000000;font-family:verdana;font-size:10;border-style:dashed;border-width:1;border-color:#006699;width:200;height:90;padding:5">
</div>

<script type="text/javascript" language="javascript">
ejs_box2_message = new Array;
ejs_box2_message[0] = '<a href="http://webnews.html.it/focus/203.htm">Altnet: KaZaA strizza l'occhio alle major</a><img src="img/focus203.gif"/>';
ejs_box2_message[1] = '<a href="http://webnews.html.it/focus/202.htm">Napster verso la bancarotta?</a><img src="img/focus202.gif"/>';
ejs_box2_message[2] = '<a href="http://webnews.html.it/focus/201.htm">E-commerce: l'Europa tassa gli USA</a><img src="img/focus203.gif"/>';

ejs_box2_actual = 0;
ejs_box2_html_flag = 0;

function ejs_box2_go()
{
if(document.getElementById)
{
ejs_box2_char = 1;
ejs_box2_affich(ejs_box2_actual)
ejs_box2_actual++;
if(ejs_box2_actual>= ejs_box2_message.length)
ejs_box2_actual = 0;
}
}

function ejs_box2_affich(lactual)
{
var pix = ejs_box2_message[lactual].charAt(ejs_box2_char);
if(pix == "<")
ejs_box2_html_flag = 1;
if(pix == ">")
ejs_box2_html_flag = 0;
var texte = ejs_box2_message[lactual].substring(0,ejs_box2_char);
document.getElementById("ejs_box2_box").innerHTML = texte;
if(ejs_box2_char < ejs_box2_message[lactual].length)
{
ejs_box2_char++;
if(ejs_box2_html_flag == 1)
ejs_box2_affich(lactual);
else
setTimeout("ejs_box2_affich("+lactual+")",50)
}
else
setTimeout("ejs_box2_go()",2000)
}

window.onload = ejs_box2_go;
</script>

Analizziamo i punti da personalizzare.

<div id=ejs_box2_box
style="background:#ffffff;color:#000000;font-family:verdana;font-size:10;border-style:dashed;border-width:1;border-color:#006699;width:200;height:90;padding:5">
</div>

Il livello qui sopra è il "contenitore" delle news.

Attraverso i fogli di stile dobbiamo impostare rispettivamente:

background:#FFFFFF

il colore dello sfondo

color:#000000

il colore del testo

font-family:Verdana

il tipo di font del testo

font-size:10

la grandezza del testo

border-style:dashed

lo stile da applicare al bordo del box

border-width:1

lo spessore del bordo

border-color:#006699

il colore del bordo

width:200

la lunghezza del box (in pixel)

height:90

l'altezza del box (in pixel)

padding:5

la distanza del testo (o delle immagini) dal bordo del box

ejs_box2_message[0] = '<a href="http://webnews.html.it/focus/203.htm">Altnet: KaZaA strizza l'occhio alle major</a>
<img src="img/focus203.gif"/>';
ejs_box2_message[1] = '<a href="http://webnews.html.it/focus/202.htm">Napster verso la bancarotta?</a><img src="img/focus202.gif"/>';
ejs_box2_message[2] = '<a href="http://webnews.html.it/focus/201.htm">E-commerce: l'Europa tassa gli USA</a><img src="img/focus203.gif"/>';

come potete notare tutti i testi delle notizie sono contenuti, come spesso abbiamo visto, dentro degli ARRAY che devono seguire la solita numerazione progressiva tra le parentesi quadrate.
In ogni ARRAY possiamo inserire codice HTML, comprese immagini e link. Nel caso dovessimo usare del testo che abbia degli apostrofi (') dovremo anteporre un backslash () davanti al carattere ' per non provocare un errore.
Gli ARRAY che possono essere inseriti sono praticamente illimitati.

setTimeout("ejs_box2_go()",2000)

l'ultimo parametro da impostare è il tempo che deve passare tra un cambio di notizia e l'altro. il tempo, in questo caso, è di 2000 millisecondi. Nel caso volessimo un intervallo, ad esempio, di 5 secondi basterà cambiare il valore da 2000 in 5000.

Altre modifiche non sono necessarie.


Ti consigliamo anche