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
So stellen Sie ein Angular-Projekt mit Docker bereit
Es gibt zwei Möglichkeiten, Angular-Projekte mit ...
So lösen Sie das Problem, dass Tomcat9.exe abstürzt
Ein Leser kontaktierte mich und fragte, warum es ...
Beispielcode für Text-Origami-Effekt mit CSS3
Vorwort In diesem Artikel erfahren Sie hauptsächl...
So stellen Sie mit einem Zertifikat eine Verbindung zu einem Remote-Docker-Server her
Inhaltsverzeichnis 1. Verwenden Sie Skripte, um T...
Ein Artikel zum Verständnis der Erstellung, des Hochladens, Abrufens und Bereitstellens von Docker-Images
Inhaltsverzeichnis 1. Bilder 1. Was ist ein Spieg...
Berechnete Eigenschaften und Listenerdetails
Inhaltsverzeichnis 1. Berechnete Eigenschaften 1....
Informationsübertragung und Funktionsaufrufe zwischen WeChat-Miniprogrammseiten und -Komponenten
In diesem Artikel werde ich die relevanten Inhalt...
So installieren Sie MySQL über SSH auf einem CentOS VPS
Geben Sie yum install mysql-server Drücken Sie Y,...
Detailliertes Beispiel einer MySQL-Austauschpartition
Detailliertes Beispiel einer MySQL-Austauschparti...
JavaScript zur Implementierung der mobilen Signaturfunktion
In diesem Artikel wird der spezifische JavaScript...
So installieren Sie die neueste Version von Docker mit dem Befehl „Deepin apt“
Schritt 1: Ubuntu-Quelle hinzufügen Wechseln Sie ...
Wo werden MySQL-Daten gespeichert?
Speicherort der MySQL-Datenbank: 1. Wenn MySQL di...
Beispiel der MySQL-Group_Concat-Methode zum Schreiben von Gruppenfeldern in eine Zeile
Dieser Artikel beschreibt anhand eines Beispiels,...
Tutorial zur Installation des MySQL 5.7.18-Binärpakets unter Linux (ohne Standardkonfigurationsdatei my_default.cnf)
Ich lerne gerade MySQL. Ich bin ein kompletter Ne...
Detaillierte Erläuterung der Zeichenreihenfolge von MySQL Order by in (empfohlen)
//MySQL-Anweisung SELECT * FROM `MyTable` WHERE `...