Nachdem ich die Beispiele des Bildes gelesen hatte, das in den Beispielen für Spezialeffekte von JavaScript -Webseite runtergeht, denke ich, dass es sich lohnt, gelernt zu werden.
Ändern Sie das Bild in ein Snowflake -Bild, um den Effekt einer Schneeflocke zu vervollständigen.
Darüber hinaus sind einige der Inhalte relativ veraltet. Wechseln wir sie also in Gelehrte.
enthalten:
1. Die Operationen links und oben unterstützen nur den IE -Browser. Das ist in Ordnung. Es muss Chrome unterstützen.
2. Um den Aufenthaltsort des Bildes zu steuern, müssen Sie auch nach Elements suchen. Wenn nicht, ändern Sie es in die Array -Wartung und betreiben Sie die im Array gehaltenen Objekte direkt, was nicht schneller ist.
3. Das Hinzufügen von Elementen zum Dokument ändert sich direkt zum Erstellen von Elementobjekten über JS -Code.
Implementierungsideen:
1. Initialisieren und erzeugen Sie 10 Divs, die alle absolut positioniert sind. Legen Sie ein Schneeflockenbild in jedes Div, stellen Sie die Breite und Höhe ein und speichern Sie es in einem Array, damit die Funktionen, die später Schnee schnecken, direkt funktionieren können.
2. Initialisieren Sie die horizontalen und vertikalen Koordinaten jedes Divs und geben Sie der Schneeflocke immer eine Ausgangsposition für den Sturz.
3. Initialisieren Sie jede Schneeflocke mit einem vertikalen Tropfenschritt und einem horizontalen Schwungschritt, so dass jede Schneeflocke mit einer anderen Geschwindigkeit fällt und schwingt.
4. Machen Sie eine Schneefunktion und passen Sie die Funktion alle 10 Sekunden an. Jedes Mal steuert es die Funktion, um die Länge jeder Schneeflocke, die vertikal fällt, zu kontrollieren, und berechnet einen Sinuswert durch die Sinusfunktion und multiplizieren Sie sie mit der Amplitude. Auf diese Weise fallen die Schneeflocken in Form einer Sinuswellenform.
Sie können alle Bilder online finden.
Der folgende Code ist mit IE8+ und Chrome kompatibel.
Die Codekopie lautet wie folgt:
<body>
<Script Language = "JavaScript">
// Im Bild des Bildes ist die Flugbahn der horizontalen Koordinate eine sinusförmige Kurve, die auf einem Punkt zentriert ist.
// Die Animationsfunktion wird mit der SetTimeout -Funktion abgeschlossen
//Bild
var snowSrc = "snowflake.png"
// die Anzahl der Schneeflocken
var nr. = 10;
// Variablen deklarieren, XP repräsentiert horizontale Koordinaten, yp repräsentiert vertikale Koordinaten>
var dx, xp, yp;
// Variablen deklarieren, AM repräsentiert die Amplitude der linken und rechten Schaukeln, STX repräsentiert den Offset -Schritt der horizontalen Koordinate. Sty repräsentiert den Schritt der vertikalen Koordinate>
var am, stx, sty;
{
// Holen Sie sich die Breite des aktuellen Fensters
clientWidth = document.body.clientwidth;
// Erhalten Sie die Höhe des aktuellen Fensters
ClientHeight = document.body.clientHeight;
}
var dx = new Array ();
var xp = new Array ();
var yp = new Array ();
var am = new Array ();
var stx = new Array ();
var sty = new array ();
var snowflakes = new Array ();
für (i = 0; i <no; ++ i) {
dx [i] = 0;
// Der Anfangswert der horizontalen Koordinate des I-TH-Bildes
xp [i] = math.random ()*(ClientWidth-50);
yp [i] = math.random ()*clientHeight; // Der ursprüngliche Wert der vertikalen Koordinate des I-TH-Bildes
bin [i] = math.random ()*20; // Die Amplitude der linken und rechten Schaukeln des I-ten Bildes
stx [i] = 0,02 + math.random ()/10; // die Schrittlänge der x-Richtung des i-ten Bildes
sty [i] = 0,7 + math.random (); // die Schrittlänge der I-te Bild-y-Richtung
// Erzeugen Sie ein Div, das das Schneeflockenbild hält und seine absoluten Koordinaten festlegt
var schneeflakediv = document.createelement ('div');
snowflakediv.setattribute ('id', 'dot'+ i);
snowflakediv.style.position = 'absolut';
snowflakediv.style.top = 15;
snowflakediv.style.left = 15;
// Erzeugen Sie ein Schneeflockenbildobjekt, setzen Sie die Breite und Höhe und fügen Sie Div hinzu
var snowflakeImg = document.createelement ('img');
snowflakeimg.setattribute ('src', snowSrc);
snowflakeimg.style.width = 30;
snowflakeimg.style.height = 30;
// Fügen Sie die Snowflake Div in das Dokument hinzu und speichern Sie sie durch das Array
snowflakediv.appendchild (snowflakeimg);
document.body.appendchild (snowflakediv);
Schneeflocken [i] = Snowflakediv;
}
Funktion snow () {
für (i = 0; i <no; ++ i) {
// Die vertikale Koordinate plus Schrittlänge des I-ten Bildes
yp [i] += sty [i];
// Wenn die neue Koordinate die untere Kante des Bildschirms überschreitet, setzen Sie die Informationen des Bildes zurück, einschließlich der horizontalen Koordinate, der vertikalen Koordinate und der Schrittgröße in der X-Richtung und der Schrittgröße in der y-Region
if (yp [i]> clientHeight-50) {
// Die horizontalen Koordinaten des Bildes neu zuweisen
xp [i] = math.random ()*(ClientWidth-AM [i] -30);
// Die vertikalen Koordinaten des Bildes neu zuweisen
yp [i] = 0;
}
dx [i] += stx [i]; // einen Schritt hinzufügen
// manipulieren Sie die entsprechende Schneeflocken -Div im Array direkt
var schneeflakediv = snowflakes [i];
// Aktualisieren Sie die vertikalen Koordinaten des Bildes
snowflakediv.style.top = yp [i];
// Aktualisieren Sie die horizontale Achse des Bildes
snowflakediv.style.left = xp [i] + am [i]*math.sin (dx [i]);
}
// Legen Sie den Zeitraum für die Animations -Aktualisierung fest
setTimeout ("snow ()", 10);
}
// die Snowie () -Funktion rufen
Schnee();
</script>
</Body>
Das obige ist der gesamte Code und der Effekt ist ziemlich gut. Die spezifische Erklärung finden Sie in den Kommentaren. Ich werde hier nicht viel Unsinn sprechen. Ich hoffe, es wird für alle hilfreich sein.