Die Beispiele in diesem Artikel teilen die Implementierung des Snowflake -Flying -Effekts von JavaScript als Referenz. Der spezifische Inhalt ist wie folgt
Prinzip:
1. JS erstellt dynamisch DIV und gibt die Klasse der Klasse an, um verschiedene Hintergrundbildstile zu setzen, um unterschiedliche Schneeflockeneffekte anzuzeigen.
2. JS erhält den erstellten Div und ändert seinen Top -Attributwert. Wenn die fallende Höhe größer als die Bildschirmhöhe ist, wird das mobile Div gelöscht.
3. Sprühen Sie nicht, wenn es unvollständig zu sein scheint
Effekt Vorschau: http://wjf444128852.github.io/demo02/snow/index.html
HTML -Code:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Snowflakes fliegen </title> <link rel = "styleSheet" href = "css/index.css"> <script src = "js/move.js"> </script> </cription> </cription> </cription> </cript </div> </body> </html>
CSS -Code
*{Margin: 0; Polsterung: 0; Listenstil: Keine; Grenze: Keine;} Körper {Breite: 100%; Höhe: 600px; Hintergrund:#000;}. snow_parent {Position: relativ; Breite: 100%; Höhe: 100%; Überlauf: versteckt; Rand: 0 Auto;}. snow_parent div.parent {Hintergrund-Image: url (../ img/snow.png); float: links; -Webkit-transform: scale (.1); -moz-transform: scale (.1); -O-transform: scale (.1); -ms-transform: scale (.1); Transformation: Skala (.1); Position: absolut;}. snow_one {width: 180px; Höhe: 180px; Hintergrundposition: 0 0; Hintergrundrepeat: No-Repeat; links: -70px; Oben: -95px;}. Snow_two {Breite: 140px; Höhe: 140px; Hintergrundposition: -220px -18px; Links: -30px; TOP: -75PX;}. Snow_three {width: 150px; Höhe: 150px; Hintergrundposition: -400px -15px; links: -20px; Top: -80px;}. Snow_four {Breite: 160px; Höhe: 160px; Hintergrundposition: -10px -206px; } .snow_four {links: -10px; Top: -85px;}JS -Code:
/* Creatby Jiucheng 2016-4-24*/ window.onload = function () {init ();} // DIVFUTICT CREATDIV () {// DIV erstellen und an das übergeordnete Element var snowdiv = document.createelement ("div"); document.getElementById ("js_sonw"). appendChild (snowdiv); // Machen Sie die Klasse, die Div zufällig erstellt und verschiedene Schneeflocken Var Whatname = ["Snow_one Parent", "Snow_two Parent", "Snow_THEe Parent", "Snow_Four Parent"]; var index = math.floor (math.random ()*WhatName.length); snowdiv.className = Whathname [Index]; // den linken Attributwert des Div (zufällig) abrufen und dem erstellten Div var Whatleft = getleft ()+'px' zuweisen; SnowDiv.Style.Left = WhyLeft; Return SnowDiv;} // Die zufällige Funktion des linken Attributwerts erhalten Getleft () {// Erhalten Sie den maximalen linken Attributwert des Divs, dh die Breite des übergeordneten Elements var Eleparent = document.getElementById ("js_sonw"); // Alle Stile des übergeordneten Elements var var style = window.getComputedStyle (Eleparent) erhalten; // Die linke in CSS ist hier eine negative Zahl, die hier subtrahiert werden muss. // links vom erstellten Div ein zufälliger Wert var randomleft = math.floor (math.random ()*maxwidth) sein; randomLeft zurückgeben;} // lass es bewegt () {// das bewegende Objekt var moveelem = creatDiv () abrufen; // Alle Stilattributwerte des Moving Object var eltyle = window.getComputedStyle (MoveLem) abrufen; // Alle Stilattributwerte des Moving Object var eltyle = window.getComputedStyle (MoveLem) abrufen; // Erhalten Sie den Top -Attributwert var eletop = parseInt (teeltyle.top); // Setzen Sie den Timer so, dass der obere Attributwert des sich bewegenden Objekts dynamisch geändert wird. ClearInterval (t); // Die Tropfengeschwindigkeit hat keine 10 Millisekunden, um 1px} Funktion init () {// Dynamisch die Höhe des Körperdokuments zu erhalten. // Erstellen Sie alle 500 Millisekunden ein sich bewegendes Objekt und führen Sie die Bewegungsfunktion aus var t = setInterval (function () {bewegt ();}, 100);} ausDas obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.