Verwenden Sie Javascript, um den Effekt fallender Schneeflocken zu erzielen. Javascript-Fähigkeiten

Nachdem ich das Beispiel für die Wirkung schwebender Bilder in der Sammlung von Beispielen für JavaScript-Web-Spezialeffekte gelesen habe, denke ich, dass es sich lohnt, es zu lernen.

Ändern Sie das Bild in ein Schneeflockenbild, um den Effekt fallender Schneeflocken zu erzielen.

Außerdem sind einige Inhalte relativ veraltet, also ändern wir sie.

Beinhaltet:

1. Die Operationen links und oben unterstützen nur den IE-Browser. Damit dies funktioniert, muss Chrome unterstützt werden.
2. Der Prozess zur Steuerung des Speicherorts des Bildes erfordert das Abrufen des Elements. Wenn nicht, ändern Sie es in den Array-Speicher und betreiben Sie die im Array gespeicherten Objekte nicht schneller.
3. Fügen Sie Elemente direkt zum Dokument hinzu, indem Sie Elementobjekte über JS-Code erstellen.

Umsetzungsideen:

1. Initialisieren und generieren Sie 10 Divs, die alle eine absolute Positionierung verwenden, legen Sie die Breite und Höhe fest und speichern Sie es in einem Array, damit die nachfolgende Schneefunktion direkt ausgeführt werden kann.
2. Initialisieren Sie die Abszisse und Ordinate jedes Teils. Geben Sie den Schneeflocken immer eine Startposition zum Fallen.
3. Initialisieren Sie jede Schneeflocke so, dass sie einen vertikalen Fallschritt und einen horizontalen Schwingschritt aufweist, sodass jede Schneeflocke mit unterschiedlicher Geschwindigkeit fällt und schwingt.
4. Erstellen Sie eine Schneefunktion und passen Sie die Funktion alle 10 Sekunden an. Jedes Mal, wenn Sie die Funktion anpassen, wird jede Schneeflocke so gesteuert, dass sie um ihre eigene Schrittlänge fällt. Der horizontale Schwung wird mithilfe der Sinusfunktion berechnet und dann multipliziert durch Amplitude, sodass die Schneeflocken in einer Sinuswellenform fallen.

Bilder finden Sie online.

Der folgende Code ist mit IE8 und Chrome kompatibel.

Code kopieren Der Code lautet wie folgt:

Das Obige ist der gesamte Code, der Effekt ist ziemlich gut. Bitte lesen Sie die Kommentare für eine spezifische Erklärung. Hier wird es keinen Unsinn mehr geben. Ich hoffe, dass es für alle hilfreich sein kann.