Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Testo con effetto fade e scrolling
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: nessuno
Visualizza la demo
Scarica la demo
L'esempio di oggi, può essere una soluzione molto utile per dare risalto a determinati links e richiami all'interno della nostra pagina.
Vediamo quali sono le parti di Javascript che possiamo personalizzare per adattarlo alle proprie esigenze:
delayslidefade=1000
delayfadeslide=1000
movePx=10
var loop=1
fontface='arial,helvetiva'
fontsize=12
fadeback=1
//Set the colors, first color is same as background, last color is the color it stops at:
//You can have upto 7 colors, set the ones you wan't use to 0
colors=new Array()
colors[0]='#FFFFFF'
colors[1]='#EEEEEE'
colors[2]='#CCCCCC'
colors[3]='#999999'
colors[4]='#666666'
colors[5]='#333333'
colors[6]='#000000'
//This is the news you wanna have, set the link and the text. If you don't wan't it to link anywhere
//use a # as the link. Just copy the three lines and change the numbers.
//REVISED: I had a error in a below function that made it only take 2 news, that should now be fixed.
news=new Array()
news[0]=new Array()
news[0]["text"]="Circuito.risorse.net"
news[0]["link"]="http://circuito.risorse.net"
news[1]=new Array()
news[1]["text"]="Aumenta gli accessi del tuo sito Web..."
news[1]["link"]="http://circuito.risorse.net"
news[2]=new Array()
news[2]["text"]="...visitando i siti dei membri o con i referrer"
news[2]["link"]="http://circuito.risorse.net"
E vediamo ora il loro significato variabile per variabile:
delayfadeslide=1000
Il ritardo tra l'effetto fade ed il testo successivo.
movePx=10
Velocità di visualizzazione delle slide (quanti pixel alla volta).
var loop=1
Indica se vogliamo inserire un ciclo nelle slide (ovvero ripeterle all'infinito).
0 corrisponde a no, 1 a sì.
fontface='arial,helvetiva'
Il Font che vogliamo utilizzare per il testo
fontsize=12
Grandezza del testo, in pixel.
fadeback=1
Se volessimo eliminare l'effetto fade, è necessario cambiare 1 con 0.
colors=new Array()
colors[0]='#FFFFFF'
colors[1]='#EEEEEE'
colors[2]='#CCCCCC'
colors[3]='#999999'
colors[4]='#666666'
colors[5]='#333333'
colors[6]='#000000'
L'array che contiene i colori per l'effetto fade. L'ultimo colore indica la fine del fade.
news[0]=new Array()
news[0]["text"]="Circuito.risorse.net"
news[0]["link"]="http://circuito.risorse.net"
news[1]=new Array()
news[1]["text"]="Aumenta gli accessi del tuo sito Web..."
news[1]["link"]="http://circuito.risorse.net"
news[2]=new Array()
news[2]["text"]="...visitando i siti dei membri o con i referrer"
news[2]["link"]="http://circuito.risorse.net"
L'array che contiene testo e links dell'animazione.
Impostato tutto il Javascript iniziale, possiamo inserire il layer che conterrà l'animazione:
<div id="divCont" style="position:absolute; width:250; height:200;
left:300; top:230; clip:rect(0,250,70,0)">
<div id="divNews" style="position:absolute; top:80">
<script>//We gotta write something here so netscape
will make it
//be the correct size, but we will only write if it's a
4.x browser
if(document.all || document.layers)
document.write("dummy text, dummy"
+"text, you can place you fist news or a welcome msg or
something here."
+"If you place these layers inside a table or something
you can also"
+"use this as the msg that browsers that doesn't suport
dhtml will see.")
</script>
</div>
</div>
Finito questo, abbiamo terminato lo script. Per accedere all'intero codice sorgente della demo, scaricare l'esempio disponibile sul Web.
A Martedì prossimo.
Per qualsiasi dubbio, puoi scrivere sul Forum di Risorse.net, all'indirizzo
www.risorse.net/community/forum
L A C O M U N I T A ` D I R I S O R S E . N E T
Per accedere alle sezioni protette di Risorse.net (Forum, Newsgroup, sezione
password dell'archivio Dhtml ecc.) devi essere iscritto alla Comunità.
L'iscrizione è gratuita e viene garantita la tutela della privacy (675/96).
Visita www.risorse.net/community.
|
