Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; <img border="0" src="snow.gif">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; <img border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&
nbsp;&nbsp;&nbsp;<img border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img border="0" src="snow.gif">&nbsp;&nbsp;&nbsp; <img border="0"
src="snow.gif"> <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img
border="0"
src="snow.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;

<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>&nbsp;</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
 

 
 
Home > dhtml > teoria > 2000 > dicembre > ...   © 1999-2017 Risorse.net, tutti i diritti riservati