principe:
1. JS crée dynamiquement Div, spécifiant la classe de classe pour définir différents styles d'image d'arrière-plan pour afficher différents effets de flocon de neige.
2. JS obtient le div créé et modifie sa valeur d'attribut supérieure. Lorsque la hauteur de chute est supérieure à la hauteur de l'écran, la div mobile sera supprimée.
3. Ne vaporisez pas si cela semble être incomplet
Code html:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <Title> Snowflakes Flying </ title> <link rel = "Stylesheet" href = "css / index.css"> <script src = "js / move.js"> </cript> </read> </div> </ body> </html>
Code CSS
* {margin: 0; rembourrage: 0; Style de liste: aucun; Border: Aucun;} corps {largeur: 100%; Hauteur: 600px; Contexte: # 000;}. Snow_Parent {position: relative; Largeur: 100%; hauteur: 100%; débordement: caché; marge: 0 auto;}. neige_parent div.parent {background-image: url (../ img / neige.png); flottant: à gauche; -Webkit-transform: échelle (.1); -Moz-transform: échelle (.1); -o-transform: échelle (.1); -ms-transform: échelle (.1); transformée: échelle (.1); Position: Absolute;}. Snow_One {largeur: 180px; hauteur: 180px; Position d'arrière-plan: 0 0; République de fond: sans répétition; gauche: -70px; en haut: -95px;}. neige_two {largeur: 140px; hauteur: 140px; Position d'arrière-plan: -220px -18px; Gauche: -30px; en haut: -75px;}. neige_ trois {largeur: 150px; hauteur: 150px; Position d'arrière-plan: -400px -15px; Gauche: -20px; en haut: -80px;}. neige_four {largeur: 160px; hauteur: 160px; Position d'arrière-plan: -10px -206px; } .snow_four {Left: -10px; en haut: -85px;}Code js:
/ * CreatBy Jiucheng 2016-4-24 * / window.onload = function () {init ();} // Créer DivFunction CreatDiv () {// Créer Div et Ajouter à l'élément parent var snowDiv = document.createElement ("div"); document.getElementById ("JS_SONW"). APPENDCHILD (SnowDiv); // fait la classe qui crée div au hasard et affiche différents flocons de neige var whatname = ["neige_one parent", "neige_two parent", "neige_three parent", "neige_four parent"]; var index = math.floor (math.random () * whagename.length); snowDiv.className = whatName [index]; // Obtenez la valeur d'attribut gauche du div (aléatoire) et attribuez-le au div var créé whatleft = getleft () + 'px'; snowdiv.style.left = whatleft; return SnowDiv;} // Obtenez la fonction de valeur d'attribut gauche aléatoire Getleft () {// Obtenez la valeur d'attribut gauche maximale du div, c'est-à-dire la largeur de l'élément parent var eleparent = document.getElementById ("js_sonw"); // Obtenez tous les styles de l'élément parent var var style = window.getCompuledStyle (eleParent); // La gauche en CSS est un nombre négatif ici doit être soustraité ici var maxwidth = parseInt (style.width) +70; // Soit la gauche de la div créée une valeur aléatoire var randomleft = math.floor (math.random () * maxwidth); return randomleft;} // LET IT MOTIFOWN () {// Obtenez l'objet en mouvement var moveLem = CreatDiv (); // Obtenez toutes les valeurs d'attribut de style de l'objet mobile var elestyle = window.getCompuledStyle (moveLem); // Obtenez toutes les valeurs d'attribut de style de l'objet en mouvement var elestyle = window.getCompupedStyle (moveLem); // obtient sa valeur d'attribut supérieur var eletop = parseInt (elestyle.top); // Définissez le temporisateur pour modifier dynamiquement la valeur d'attribut supérieur de l'objet en mouvement var t = setInterval (function () {eletop ++; // payer la nouvelle valeur supérieure à l'objet en mouvement movelelem.style.top = eletop + "px"; // lorsqu'il tombe à la hauteur de l'écran, arrêtez le temporisateur et supprimez l'objet en mouvement de l'élément parent si (eletop> = fenêtre. clearInterval (t); // La vitesse de goutte n'a pas 10 millisecondes pour tomber 1PX} fonction init () {// Get et régiment dynamiquement la hauteur du body document.body.style.height = window.innerHeight + "px"; // Créer un objet en mouvement tous les 500 millisecondes et exécuter la fonction de mouvement var t = setInterval (function () {movrown ();}, 100);}L'article ci-dessus JavaScript réalise l'effet de neige [Exemple de code] est tout le contenu que je partage avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.