Javascript sniego poveikį

Įrašė Claudio Matarrelli kategorijos Solutions Lap 27, 2009 | 2 komentarai

Pirmaisiais metais, kai aš pradėjau dirbti internete buvo ne daug techninių prietaisų, kurie įspūdį lankytojams.
DHTML poveikis buvo vienintelis elementas, siekiant praturtinti puslapiuose.

Atsižvelgiant į tai, klasikinis naudojama tūkstančius svetainių buvo žiemos mėnesiais sniego.

Tai buvo kelių dešimčių KB scenarijų poveikis tikrai malonus, bet dažnai avarijos naršyklėje dėl nuolat sutampa sluoksnių, jei vienas kiekvienos naujos gautos snaigės.

Tačiau naršant internete Aš ką tik nustatė šių senų scenarijus, arba kai senamadiškas atgimimas visada labai sunkus.

Kodėl gi ne sukurti kažką šviesos, kad nebūtų sulėtinti kroviklius, kurie ne siųsti prisotins naršyklę, išteklius ir kaip jūs galite ne erzina skaitytoją?

Štai ką aš ką tik bandė daryti.

Scenarijus bandomas naujesnės versijos populiariausių naršyklių (IE, Firefox, Chrome, Opera ir tt). Bet aš negaliu garantuoti, atgalinį suderinamumą su senesnės naršyklės 3-4 metus, šiuo atveju ji neveikia, jei problema yra ne scenarijus tačiau nebuvo atnaujinta, kad laikas daryti ... :-)

Jei norite naudoti scenarijus ar rašyti bei tiems, kuriems jos reikia. Tik mandagumo nekeičia dalis, kuri nurodo šaltinį.

Galimybės yra gerai dokumentuota, tiesiog redaguoti kintamieji scenarijaus viršuje.

  • Pagal gautus iš dribsnių;
  • Greitis, kuriuo jie juda;
  • Maksimalus dydis dribsnių;
  • Mažiausia suma, dribsnių;
  • Simbolis paprastai dribsniai, arba alternatyviai; įvaizdį;
  • Spalva dribsnių;
  • Debesuota; 
  / * Scenarijų, kuris sudaro puslapis sningant internete 
      sukūrė Claudio Matarrelli 
      claudio.matarrelli @ gmail.com 
      (C) 2009 www.matarrelli.com 

      Laisvai naudojamos, jei paliksite matomas autorių 
  * /

 / / Konfigūravimas kintamųjų
 100 ; numerofiocchi var = 100;
 300 ; //millisecondi var laikas = 300 / / milisekundžių
 ; //px dimensionemassimafiocco = 40 / / px
 ; //px dimensioneminimafiocco = 8 / / px
 ; /*consigliati * o punto. caratterefiocco = "*", / * rekomenduojama * arba klausimu.  Arba gali būti vaško 
                                vaizdas su žyma <img src="http://indirizzo/immagine.jpg"> * /
 ; colorefiocco = "# F00";
 ; skaidrumo = 0,5;
 / / Inicjalizacja kintamieji
 0 ; var index = 0;

 / / Ši funkcija generuoja kuokšteliniai pluoštai, kad yra div * į visiškai įrengti
 idfiocco ) { štapelio funkcija (idfiocco) (
     '<div id="neve' + idfiocco + '" style="filter:alpha(opacity=' + trasparenza * 100 + ');-moz-opacity:' + trasparenza + ';-khtml-opacity:' + trasparenza + ';opacity: dokumentas. parašyti ("<div id =" sniegas "+ idfiocco +" "style =" Filtruoti: alpha (opacity = '+ skaidrumo * 100 +');- MOZ-opacity: "+ skaidrumo +",-KHTML-opacity : "+ skaidrumo +", neskaidrumo:  

  trasparenza + ';color:' + colorefiocco + ';font-size:' + Math . floor ( Math . random ( ) * ( dimensionemassimafiocco - dimensioneminimafiocco + 1 ) + dimensioneminimafiocco ) + 'px; position:fixed; "+ Skaidrumas +" color: "+ colorefiocco +" font-size: "+ Math. Aukštas (Mat. random () * (dimensionemassimafiocco - dimensioneminimafiocco + 1) + dimensioneminimafiocco) +" px; position: fixed;  

  Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px; left:' + Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px">' + caratterefiocco + '</div>' ) Į viršų: '+ Math. aukšte (Mat. random () * ekrano. aukštis * 0,7) +' px; kairės: "+ Math. aukšte (Mat. random () * ekrano. plotis - 40) +" px ">" caratterefiocco + + "</ div> ')
 )

 / / Sukuria skaičių, dribsnių numerofiocchi nustatyti vienodo
 generaFiocchi function () (
     indice = 0 ; indice < numerofiocchi ; indice ++ ) { už (index = 0; index <numerofiocchi; indeksas + +) (
         kuokštelinių (indeksas)
     )
 )
 / / Perkelti dribsnių atsitiktinai kaskart išlaikyti nustatytą laiką
 spostaFiocchi function () (
     indice = 0 ; indice < numerofiocchi ; indice ++ ) { už (index = 0; index <numerofiocchi; indeksas + +) (
     'neve' + indice ) . style . top = Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px' ; dokumentas. getElementById ("sniegas" + rodyklės). stilių. viršuje = Math. aukšte (Mat. random () * ekrano. aukštis * 0,7) + 'px';
     'neve' + indice ) . style . left = Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px' ; dokumentas. getElementById ("sniegas" + rodyklės). stilių. Kairėje = Math. aukšte (Mat. random () * ekrano. plotis - 40) + "px";
     )


     , tempo ) ; setTimeout ("spostaFiocchi ()", metu);

 )

 / / Pradėti dribsnių kartos
 generaFiocchi ();

 / / Execute perkelti toliau
 spostaFiocchi ();

Norėdami įdiegti, tiesiog įkelti į savo serverį scenarijų ir įtraukti puslapio apačioje prieš </ body> 

  <script src="http://indirizzo/neve.js" LANGUAGE="JavaScript"> </ script>

2 Responses to "Javascript" sniego efektas "

  1. Flavio sako:
    27/11/2009 stovėjimo 20:05

    Jūs pagaliau pradėjo planuoti?

  2. Claudio Matarrelli rašo:
    27/11/2009 stovėjimo 20:07

    Tiesą sakant aš už metus, kai turiu teisę dirgiklius .. Kaip namuose pietų su maro :-)

Leave a comment