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
Zabbix3.4-Methode zum Überwachen des MongoDB-Datenbankstatus
Mongodb verfügt über einen Befehl db.serverStatus...
Hinweise zu Linux-Systembefehlen
Dieser Artikel beschreibt die Linux-Systembefehle...
Schritte zum Erstellen eines WEBSERVERS mit NODE.JS
Inhaltsverzeichnis Was ist nodejs Installieren Si...
So implementieren Sie eine MySQL-Datenbanksicherung in Golang
Hintergrund Navicat ist das beste MySQL-Visualisi...
Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten
Inhaltsverzeichnis Problemanalyse Warum Kapselung...
So verwenden Sie http und WebSocket in CocosCreator
Inhaltsverzeichnis 1. HttpGET 2. HTTP POST WebSoc...
Detailliertes Tutorial zur Installation der MySQL 8.0.20-Datenbank auf CentOS 7
Weiterführende Literatur: MySQL8.0.20-Installatio...
So verwenden Sie die ES6-Klassenvererbung, um einen wunderschönen Balleffekt zu erzielen
Inhaltsverzeichnis einführen Implementierungsschr...
Drei BOM-Objekte in JavaScript
Inhaltsverzeichnis 1. Standortobjekt 1. URL 2. Ei...
jQuery realisiert den Scroll-Effekt von Tabellenzeilendaten
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie Docker zum Erstellen einer Entwicklungsumgebung (Windows und Mac)
Inhaltsverzeichnis 1. Vorteile der Verwendung von...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 unter Win10
In diesem Artikel werden die Installations- und K...
Detaillierte Erklärung der CSS-Stil-Kaskadierungsregeln
Der Syntaxstil der CSS-Stilregel ist die Grundein...
Detaillierte Verwendung des Docker-Maven-Plugins
Inhaltsverzeichnis Docker-Maven-Plugin Schritte z...
Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3
CSS enthält viele Attribute. Manche Attribute wer...