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".
|
| |
Fiocchi di neve all'interno della pagina
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: snow.gif
Visualizza la demo
Scarica la demo
Questo è un numero speciale della mailing list "Una demo Dhtml a settimana" e sfruttiamo questo canale per augurare un buon Natale a tutti gli iscritti ai servizi di Risorse.net. Purtroppo quest'anno non abbiamo realizzato una versione natalizia ad hoc del sito e non siamo riusciti neanche ad offrire archivi di files e servizi a tema. Stiamo infatti lavorando alacremente per la nuova versione di Risorse.net, che oltre ad avere una grafica completamente rivista, vedrà rinnovati e moltiplicati anche i servizi rivolti all'utente. Anche il codice per la gestione del Web site verrà completamente rivisto. Questo per essere più vicino alle esigenze dei nostri visitatori.
Tornando comunque alla mailing list, la speciale demo di oggi inserisce l'effetto neve in una pagina Web. Ringraziamo Fabiano Andreotta, Aka (As know as, conosciuto anche come) Atipower di www.jsdir.com per la realizzazione di questo script. Analizzando la sintassi dell'esempio, diamo un'occhiata all'<HEAD>, il quale contiene il Javascript per il movimento dei fiocchi di neve con i relativi tempi:
<script language="javascript">
// --andreotta@atipower.it--
// --http://www.jsdir.com-
// ---------------------------
Image1=new Image();
Image1.src="snow.gif"
var ll=0;
var aa=0;
var hhb=-100;
var variab=-200;
var hh=-100;
var varia=-200;
var hhc=0;
var variac=-200;
// -------------------------
function quando(){
setTimeout('scende("snow1")',100)
setTimeout('scendec("snow3")',9000)
setTimeout('scendeb("snow2")',19000)
}
// ---------------------------------
function scende(id){
if(navigator.appName=="Netscape"){
ll=window.innerWidth;
aa=window.innerHeight;
}
else if(navigator.appName=="Microsoft Internet Explorer") {
ll=document.body.clientWidth;
aa=document.body.clientHeight;
}
// ---------------------------------------------
if(varia
if(document.all){
document.all[id].style.visibility="visible"
document.all[id].style.pixelTop=varia;
document.all[id].style.pixelLeft=hh
}
else if(document.layers){
document.layers[id].visibility="visible"
document.layers[id].top=varia;
document.layers[id].left=hh;
}
else if(document.getElementById){
document.getElementById(id).style.visibility="visible"
document.getElementById(id).style.top=varia;
document.getElementById(id).style.left=hh;
}
// ------------------------------------------
hh=hh+Math.round(Math.random()*0.8)
varia++
(varia==(aa-50))?(varia=-200):varia;
(varia==-200)?(hh=0):hh;
}
setTimeout('scende("snow1")',20);
}
// ----------------------------------
function scendeb(){
if(variab<aa){
if(document.all){
document.all["snow2"].style.visibility="visible"
document.all["snow2"].style.pixelTop=variab;
document.all["snow2"].style.pixelLeft=hhb
}
else if(document.layers){
document.layers["snow2"].visibility="visible"
document.layers["snow2"].top=variab;
document.layers["snow2"].left=hhb;
}
else if(document.getElementById){
document.getElementById("snow2").style.visibility="visible"
document.getElementById("snow2").style.top=variab;
document.getElementById("snow2").style.left=hhb;
}
// ------------------------------------------
hhb=hhb+Math.round(Math.random()*0.8)
variab++
(variab==(aa-50))?(variab=-200):variab;
(variab==-200)?(hhb=0):hhb;
}
setTimeout('scendeb("snow2")',20);
}
// ------------------------------------
function scendec(){
hhc=ll/4
if(variac
if(document.all){
document.all["snow3"].style.visibility="visible"
document.all["snow3"].style.pixelTop=variac;
document.all["snow3"].style.pixelLeft=hhc
}
else if(document.layers){
document.layers["snow3"].visibility="visible"
document.layers["snow3"].top=variac;
document.layers["snow3"].left=hhc;
}
else if(document.getElementById){
document.getElementById("snow3").style.visibility="visible"
document.getElementById("snow3").style.top=variac;
document.getElementById("snow3").style.left=hhc;
}
// ------------------------------------------
hhc=hhc-Math.round(Math.random()*1)
variac++
(variac==(aa-50))?(variac=-200):variac;
(variac==-200)?(hhc=ll/4):hhc;
}
setTimeout('scendec("snow3")',20);
}
</script>
In questa porzione di codice, ti consigliamo di non modificare nulla, al massimo i tempi per l'inizio dell'animazione:
function quando(){
setTimeout('scende("snow1")',100)
setTimeout('scendec("snow3")',9000)
setTimeout('scendeb("snow2")',19000)
Nel <BODY> invece, è presenta la sintassi per l'inserimento di ogni singolo fiocco di neve:
<body onLoad="quando()">
<div id="snow1" style="position: absolute; top: 20; left: 10; height: 187;
width: 652; visibility: hidden"><img border="0"
src="snow.gif">
<img border="0" src="snow.gif">
&
nbsp;
<img border="0"
src="snow.gif">
<img border="0"
src="snow.gif">
&
nbsp;&
nbsp; <img border="0"
src="snow.gif">
<img border="0" src="snow.gif"> <img border="0"
src="snow.gif"> <br>
<img
border="0"
src="snow.gif">
<img border="0" src="snow.gif"></div>
<div id="auguri" style="position: absolute; top: 200; left: 214; width:
471; height: 28; z-index:-4;"><b><font size="5" face="Book Antiqua"
color="#0000FF"><CENTER>AUGURI
DI BUON NATALE !</font></b><BR>da <A HREF=http://www.risorse.net TARGET=_BLANK>Risorse.net</A></CENTER></div>
<p> </p>
</body>
Anche in questa porzione di codice ti consigliamo di non modificare il sorgente.
N.B.: Vuoi provare ad apparire in testa ai motori di ricerca? Risorse.net ti
offre gratuitamente una guida sui principali search engine e validi consigli
per apparire in buona posizione. Clicca www.risorse.net/motori
|
