Detaillierte Erklärung eines einfachen Schneeeffektbeispiels mit JS
VorwortViele Freunde im Süden haben vielleicht selten oder nie Schnee gesehen. Heute werde ich Ihnen eine kleine Demo bringen, um die Schneeszene zu simulieren. Schauen wir uns zunächst den Laufeffekt an Sie können klicken, um es online auszuführen: http://haiyong.site/xiaxue
Schauen wir uns zunächst die Projektstruktur an, ein Schneeflockenbild, eine HTML-Datei und jquery-1.4.2.js
Ich habe das hier verwendete Schneeflockenbild eingefügt, oder Sie können direkt die Bildadresse verwenden, die ich auf meine Website hochgeladen habe: http://haiyong.site/wp-content/uploads/2021/12/snow.png. Beginnen Sie mit einem Bild, und der Inhalt hängt vollständig von JS ab.
HauptimplementierungscodeHTML CodeHier ist der Inhalt in HTML, nichts
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Das Meer umarmt 🌊 | Schnee fällt einzeln</title>
<meta name="viewport" content="width=Gerätebreite,benutzerskalierbar=nein">
<meta name="keywords" content="Schneeflocken" />
<meta name="description" content="Tools | Snow one by one; entschlossen, eine Website mit 100 kleinen Spielen zu erstellen. Hergestellt von Haiyong, technischer Support – Haiyong" />
<meta name="author" content="Autor(http://haiyong.site/moyu)" />
<meta name="Urheberrecht" content="Quelle(http://haiyong.site/moyu)" />
<link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" rel="externes Nofollow" Größen="192x192" />
<style type="text/css">
Körper{
Hintergrundfarbe: #000000;
Rand: 0;/* Den integrierten Rand entfernen*/
}
img{
Position: absolut;
}
</Stil>
</Kopf>
<Text>
<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
JS-CodeSchalten Sie zunächst den Timer ein, um ein Schneeflockenbild hinzuzufügen. Hier kann <img src='images/snow.png'> in <img src='http://haiyong.site/wp-content/uploads/2021/12/snow.png'> geändert werden.
setzeIntervall(Funktion(){
var img = $("<img src='images/snow.png'>");
$("body").anhängen(img);
Hier ist die Größe der Schneeflocke auf 10-20px eingestellt. Die folgende Formel stellt (0-10 + 10)px dar
var Größe = parseInt(Math.random()*11)+10;
img.css("Breite",Größe+"px");
Bildschirmbreite ermitteln var w = $(Fenster).width(); Der Wertebereich sollte 0-Bildschirmbreite-Schneeflockenbreite sein var left =parseInt(Math.random()*(w-Größe)); Geben Sie den zufällig erhaltenen 1ft zum Bild
img.css("links",links+"px");Fügen Sie die Animation der Schneeflockenbewegung hinzu und ermitteln Sie die Entfernung der Schneeflockenbewegung = Bildschirmhöhe - Schneeflockengröße var top = $(Fenster).Höhe()-Größe; Der Code in den Kommentaren unten wird zum Löschen des Caches verwendet und kann hinzugefügt werden, oder nicht.
img.animate({"oben":oben+"px"},Größe*100)
/* .fadeOut(1000,function(){
//Führen Sie diesen Code aus, wenn die Animation abgeschlossen ist, um den Cache zu leeren img.remove();
//Konsole.log($("img").Länge);
}); */
},10)
Entfernen Sie das Kommentarzeichen und Sie werden sehen, wie der fallende Schnee verschwindet, wie unten gezeigt.
Wenn Sie Schneeansammlungen sehen möchten, können Sie es auskommentieren. Der Vorschaueffekt sieht dann folgendermaßen aus:
An diesem Punkt ist der Effekt, den wir erzielen möchten, abgeschlossen. Wenn die Ausführungszeit zu lang ist, kann dies zu übermäßiger Speichernutzung und Verzögerungen führen. Sie können den Inhalt im letzten Kommentar im HTML-Code auskommentieren, sodass der Schnee darunter langsam ausgeblendet und entfernt wird. Ich finde den Schnee jedoch auch sehr schön, deshalb habe ich ihn nicht schmelzen lassen, so
Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des in JS implementierten Beispiels eines einfachen Schneeeffekts. Weitere relevante Inhalte zum einfachen Schneeeffekt in JS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
>>: Was sind Inline-Elemente und Blockelemente?
Artikel empfehlen
Linux verwendet NetworkManager, um Ihre MAC-Adresse zufällig zu generieren
Egal, ob Sie zu Hause auf dem Sofa oder draußen i...
JavaScript-Funktion kapselt zufälligen Farbüberprüfungscode (vollständiger Code)
Ein n-stelliger Bestätigungscode, der aus Zahlen,...
JavaScript implementiert eine Box, die der Mausbewegung folgt
In diesem Artikel wird der spezifische JavaScript...
CSS3-Filtercode zum Erreichen des Grau- oder Schwarzmodus auf Webseiten
Frontend css3.filter kann nicht nur den Graueffek...
Detaillierte JavaScript-Rekursion
Inhaltsverzeichnis 1. Was ist Rekursion? 2. Mathe...
Grafisches Tutorial zur Installation von MySQL 5.5 unter Win7
Die MySQL-Installation ist relativ einfach. Norma...
Eine einfache Methode zum Implementieren der zeitgesteuerten Protokolllöschung unter Linux
Einführung Linux ist ein System, das automatisch ...
Gründe, warum MySQL 8.0-Statistiken ungenau sind
Vorwort Unabhängig davon, ob es sich um Oracle od...
MySql-Lerntag 03: Verbindungs- und Abfragedetails zwischen Datentabellen
Primärschlüssel: Schlagwort: Primärschlüssel Funk...
Wissenspunkte und Nutzungsdetails zu globalen Variablen und globalen Objekten von Nodejs
1. Globales Objekt Alle Module können aufgerufen ...
Lösen Sie das Problem beim Zurücksetzen des Kennworts für das Mysql-Root-Benutzerkonto
Problembeschreibung: Beim Ausführen eines Befehls...
Gemeinsame MySQL-Indexwirksamkeitsbedingungen und Indexungültigkeitsbedingungen
Inhaltsverzeichnis 1. Bedingungen für das Versage...
Zusammenfassung der Lösung für den Webpack -v-Fehler von Vue
Xiaobai lernte Vue kennen, dann lernte er Webpack...
Zusammenfassung einiger Gedanken zur Binlog-Optimierung in MySQL
Frage Frage 1: Wie kann der Leistungsverlust beho...
Lösen Sie das Problem, dass der MySql-Client in Sekunden beendet wird (my.ini nicht gefunden).
Problembeschreibung (Umgebung: Windows 7, MySql 8...