HTML+CSS+JS realisiert fliegende Schneeflocken (Code-Sharing)

Wie verwende ich HTML+CSS+JS, um Schneeeffekte zu erzielen? Der folgende Artikel zeigt Ihnen ein Beispiel für die Verwendung von HTML+CSS+JS zur Erzielung fliegender Schneeflocken. Ich hoffe, es wird Ihnen hilfreich sein.

Viele Freunde aus dem Süden haben es vielleicht nicht oft gesehen oder haben es noch nie gesehen. Heute bringe ich Ihnen eine kleine Demo, die eine Schneeszene simuliert. Schauen wir uns zunächst den Laufeffekt an Sehen Sie es sich online an: http://haiyong.site/xiaxue

Schauen Sie sich zunächst die Projektstruktur, ein Schneeflockenbild, eine .html-Datei und das von jquery-1.4.2.js verwendete Schneeflockenbild an

Ich habe es hier eingefügt, oder Sie können direkt die Bildadresse verwenden: https://img.php.cn/upload/article/000/000/024/61dea8bfbe598211.png. Beginnen Sie mit einem Bild und dem Inhalt hängt ganz von JS ab.

HTML-Code

Das Folgende ist der Inhalt im HTML, es gibt nichts

nbsp;html>

	
		<meta>
		<title>海拥| 雪一片一片</title>
		<meta>
		<meta>
		<meta> 
		<meta>
		<meta>
		<link>
		<style>
			body{
				background-color: #000000;
				margin: 0;/* 去掉自带的外边距 */
			}
			img{
				position: absolute;
			}
		</style>
	
	
		<script></script>		
	

JS-Code:

Schalten Sie zuerst den Timer ein, um das Schneeflockenbild hinzuzufügen, hier

setInterval(function(){
var img = $("<img  src=&#39;images/snow.png&#39; alt="HTML+CSS+JS realisiert fliegende Schneeflocken (Code-Sharing)" >");
$("body").append(img);

Hier stellen Sie die Größe ein die Schneeflocke auf 10–20 Pixel, die folgende Formel bedeutet (0–10 + 10) Pixel. <img src=&#39;images/snow.png&#39; alt="HTML+CSS+JS realisiert fliegende Schneeflocken (Code-Sharing)" >可以改成<img src=&#39;http://haiyong.site/wp-content/uploads/2021/12/snow.png&#39; alt="HTML+CSS+JS realisiert fliegende Schneeflocken (Code-Sharing)" >

var size = parseInt(Math.random()*11)+10;
img.css("width",size+"px");

Ermitteln Sie die Bildschirmbreite das Bild

var w = $(window).width();

Füge die Animation der Schneeflockenbewegung hinzu, um die Entfernung der Schneeflockenbewegung = Bildschirmhöhe - Schneeflockengröße zu erhalten

var left =parseInt(Math.random()*(w-size));

Der Code in den Kommentaren unten wird verwendet, um den Cache zu leeren. Du kannst ihn hinzufügen oder nicht.

img.css("left",left+"px");

Entfernen Sie den Kommentar und Sie werden sehen, dass der fallende Schnee verschwindet, wie im Bild unten gezeigt

Wenn Sie den Schnee sehen möchten, können Sie ihn auskommentieren. Der Vorschaueffekt sieht wie folgt aus:

Hier wollen wir es erreichen. Wenn die Laufzeit zu lang ist, kann dies zu einer übermäßigen Speichernutzung und Verzögerungen führen. Sie können den Inhalt im letzten Kommentar im HTML-Code auskommentieren, sodass der Schnee unten liegt wird langsam ausgeblendet und gelöscht, aber ich finde den Schnee ziemlich hübsch, also habe ich ihn nicht schmelzen lassen, so:

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonHTML+CSS+JS realisiert fliegende Schneeflocken (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!