Javascript αποτέλεσμα χιόνι

Γράφει ο / η Claudio Matarrelli στην κατηγορία Λύσεις 27 Νοεμβρίου, 2009 | 2 σχόλια

Στα πρώτα χρόνια, όταν άρχισα να εργάζεται για το διαδίκτυο δεν ήταν πολλά τεχνικά μέσα με τα οποία για να εντυπωσιάσει τους επισκέπτες.
DHTML συνέπειες ήταν το μόνο στοιχείο για τον εμπλουτισμό των σελίδων.

Σε αυτό το πλαίσιο, ένα κλασικό που χρησιμοποιείται από χιλιάδες δικτυακούς τόπους ήταν το χιόνι το χειμώνα.

Ήταν το σενάριο πολλών δεκάδων KB, το αποτέλεσμα σίγουρα ευχάριστη, αλλά συχνά συντριβή του προγράμματος περιήγησης που οφείλονται σε μια συνεχή επικάλυψη των φύλλων, ένα για κάθε νέο που δημιουργούνται νιφάδα χιονιού.

Εξακολουθεί να την περιήγηση στο διαδίκτυο βρήκα ακριβώς αυτά τα παλιά χειρόγραφα, ή κάποια παλαιά αναβίωση πάντα πολύ βαρύ.

Γιατί να μην δημιουργήσουμε κάτι ελαφρύ που να μην επιβραδύνει τη φόρτωση σελίδα η οποία δεν στέλνει κορεσμό των πόρων του προγράμματος περιήγησης και όπως δεν μπορείτε να ενοχλήσει τον αναγνώστη;

Αυτό είναι που εγώ απλά προσπάθησα να κάνω.

Το σενάριο είναι δοκιμαστεί σε νεότερες εκδόσεις του δημοφιλούς browser (IE, Firefox, Chrome, Opera, κλπ..) Αλλά εγώ δεν εγγυώνται τα πίσω συμβατότητα με παλαιότερα προγράμματα περιήγησης 3-4 έτη, στην περίπτωση αυτή δεν λειτουργεί, εάν το πρόβλημα δεν είναι το σενάριο αλλά η αδυναμία προσαρμογής είναι η ώρα να κάνουμε ... :-)

Αν θέλετε να χρησιμοποιήσετε τη δέσμη ενεργειών ή να το γράψετε καλά σε όσους την έχουν ανάγκη. Το μόνο ευγένεια να αφήσει άθικτο το τμήμα που δηλώνει ότι η πηγή.

Οι επιλογές καλά τεκμηριωμένη, απλά επεξεργαστείτε τις μεταβλητές που στο πάνω μέρος του σεναρίου.

  • Αριθμός νιφάδες?
  • Ταχύτητα με την οποία κινούνται?
  • Μέγιστο μέγεθος του νιφάδες?
  • Ελάχιστο μέγεθος των νιφάδες?
  • Χαρακτήρα νιφάδες γενικά, ή εναλλακτικά την εικόνα?
  • Χρώμα νιφάδες?
  • Αδιαφάνεια? 
 numerofiocchi = 100 ; var tempo = 300 ; //millisecondi dimensionemassimafiocco = 40 ; //px dimensioneminimafiocco = 8 ; //px caratterefiocco = "*" ; /*consigliati * o punto. / Script * ότι δημιουργεί μια χιονόπτωση στην ιστοσελίδα που δημιουργήθηκε από τον Claudio claudio.matarrelli Matarrelli @ gmail.com (C) 2009 www.matarrelli.com χρησιμοποιούνται ελεύθερα τόσο μακρά ώστε να αφήνουν εμφανή * πνευματικής ιδιοκτησίας / / / παραμετροποίησης var μεταβλητές = numerofiocchi 100? var time = 300 / / χιλιοστά του δευτερολέπτου dimensionemassimafiocco = 40 / / px dimensioneminimafiocco = 8 / / px caratterefiocco = "*", / * συνέστησε * ή το σημείο.  "#F00" ; trasparenza = 0.5 ; //inizializzazione altre variabili var indice = 0 ; // funzione che genera un fiocco, cioè un * in un div posizionato assolutamente function fiocco ( idfiocco ) { document . write ( '<div id="neve' + idfiocco + '" style="filter:alpha(opacity=' + trasparenza * 100 + ');-moz-opacity:' + trasparenza + ';-khtml-opacity:' + trasparenza + ';opacity: ' + trasparenza + ';color:' + colorefiocco + ';font-size:' + Math . floor ( Math . random ( ) * ( dimensionemassimafiocco - dimensioneminimafiocco + 1 ) + dimensioneminimafiocco ) + 'px; position:fixed; top:' + Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px; left:' + Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px">' + caratterefiocco + '</div>' ) } //genera un numero di fiocchi pari a numerofiocchi impostato function generaFiocchi ( ) { for ( indice = 0 ; indice < numerofiocchi ; indice ++ ) { fiocco ( indice ) } } //sposta i fiocchi in modo random ogni volta che passa il tempo impostato function spostaFiocchi ( ) { for ( indice = 0 ; indice < numerofiocchi ; indice ++ ) { document . getElementById ( 'neve' + indice ) . style . top = Math . floor ( Math . random ( ) * screen . height * 0.7 ) + 'px' ; document . getElementById ( 'neve' + indice ) . style . left = Math . floor ( Math . random ( ) * screen . width - 40 ) + 'px' ; } setTimeout ( "spostaFiocchi()" , tempo ) ; } // avvia la generazione dei fiocchi generaFiocchi ( ) ; //esegue lo spostamento continuato spostaFiocchi ( ) ; Ή μπορεί να είναι κερωμένο με μια ετικέτα εικόνας <img src="http://indirizzo/immagine.jpg"> * / colorefiocco = "# F00" διαφάνεια = 0,5, / / αρχικοποιήσετε μεταβλητές var δείκτης = 0? / / λειτουργία που δημιουργεί μια βάση, που είναι μια λειτουργία * σε ένα απόλυτα τοποθετημένο συνεχείς div (idfiocco) (document. write ('<div id =' χιόνι '+ idfiocco + "style =" φίλτρο: άλφα (αδιαφάνεια «+ = διαφάνειας + »,-KHTML-αδιαφάνεια:« διαφάνεια + +-αδιαφάνεια: «+», αδιαφάνεια: «+ +»)?-moz διαφάνεια + 100 * Διαφάνεια »? χρώμα:« + colorefiocco + '? font-size: « + Math. όροφος (Math. τυχαία () * (dimensionemassimafiocco - dimensioneminimafiocco + 1) + dimensioneminimafiocco) »px +, θέση: σταθερό? κορυφή '+: Math. όροφος (Math. τυχαία () * οθόνη. ύψος * 0,7) + «px? αριστερά '+: Math. όροφος (Math. τυχαία () * οθόνη. πλάτος - 40)« px + "caratterefiocco +> +" </ div>')) / / συνεπάγεται μια σειρά νιφάδες για ίση numerofiocchi generaFiocchi καθηκόντων που () (για (δείκτης = 0? <Προηγούμενα numerofiocchi? δείκτη + +) (τόξο (δείκτης))) / / μετακίνηση των νιφάδων τυχαία κάθε φορά που περνάτε την ώρα που spostaFiocchi λειτουργία () (για (δείκτης = 0?? numerofiocchi δείκτη + +) (document. getElementById («χιονιού» + Συγκεντρωτικό ευρετήριο <). στυλ. κορυφή = Math. όροφος (Math. τυχαία () * οθόνη. ύψος * 0,7) «px +»? έγγραφο. getElementById («χιονιού» + δείκτη). στυλ. αριστερά = Math. όροφος (Math. τυχαία () * οθόνη. πλάτος - 40) «px +»?) setTimeout ("spostaFiocchi ()", ώρα)?) / / έναρξη παραγωγής νιφάδων generaFiocchi () / / run η στροφή συνέχισε spostaFiocchi ()?

Για να εγκαταστήσετε, απλά φορτώστε το script στον server σας και περιλαμβάνει στο κάτω μέρος της σελίδας πριν από την </ body> 

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


2 Απαντήσεις σε "επίδραση χιόνι Javascript"

  1. Flavio λέει:
    27/11/2009 στις 20:05

    Έχετε, τέλος, ξεκίνησε τον προγραμματισμό;

  2. Claudio Matarrelli γράφει:
    27/11/2009 στο 20:07

    Πραγματικά κάνω για χρόνια, όταν έχω το δικαίωμα ερεθίσματα .. Όπως ένα απόγευμα στο σπίτι με πυρετό :-)

Αφήστε ένα σχόλιο