HTML CSS JS menyedari kepingan salji terbang (perkongsian kod)

Bagaimana untuk mencapai kesan salji menggunakan HTML CSS JS? Artikel berikut akan berkongsi dengan anda contoh cara melaksanakan kepingan salji dalam HTML CSS JS. Saya harap ia akan membantu anda.

Ramai rakan dari selatan mungkin tidak melihat banyak atau tidak pernah melihat salji Hari ini saya membawakan anda satu demo kecil yang menyerupai pemandangan salji Pertama, mari kita lihat kesan larian

Anda boleh klik untuk melihat operasi dalam talian: http://haiyong.site/xiaxue

Pertama lihat struktur projek, gambar kepingan salji, . Saya telah meletakkan imej kepingan salji yang digunakan dalam fail html dan jquery-1.4.2.js

di sini, atau anda boleh menggunakan alamat imej secara terus: https:// img.php .cn/upload/article/000/000/024/61dea8bfbe598211.png Terdapat gambar pada permulaan, dan kandungan semuanya berdasarkan JS.

Kod HTML

Berikut ialah kandungan dalam html, tiada apa-apa

nbsp;html>

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

Kod JS:

Mulakan pemasa pertama untuk menambah imej kepingan salji, <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif?x-oss-process=image/resize,p_40" class="lazy" alt="HTML CSS JS menyedari kepingan salji terbang (perkongsian kod)" > di sini boleh ditukar kepada <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif?x-oss-process=image/resize,p_40" class="lazy" alt="HTML CSS JS menyedari kepingan salji terbang (perkongsian kod)" >

setInterval(function(){
var img = $("<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/image/406/305/465/1641982792324192.gif?x-oss-process=image/resize,p_40"  class="lazy"  src=&#39;images/snow.png&#39; alt="HTML CSS JS menyedari kepingan salji terbang (perkongsian kod)" >");
$("body").append(img);

Di sini tetapkan saiz kepingan salji kepada 10-20px, formula berikut bermaksud (0-10 10 )px

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

Dapatkan lebar skrin

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

Julat nilai hendaklah 0-skrin lebar-lebar kepingan salji

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

Berikan 1eft rawak yang anda dapat Tambahkan animasi pergerakan kepingan salji pada gambar

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

dan dapatkan jarak pergerakan kepingan salji = ketinggian skrin - saiz kepingan salji

var top = $(window).height()-size;

Kod dalam komen di bawah digunakan untuk mengosongkan cache atau tidak.

img.animate({"top":top+"px"},size*100)
/* .fadeOut(1000,function(){
	//当动画完成时执行此代码，清除缓存
	img.remove();
	//console.log($("img").length);
}); */
},10)

Jika anda menyahkomennya, anda akan melihat bahawa salji yang turun akan hilang, seperti yang ditunjukkan dalam gambar di bawah

Jika anda suka melihat salji, anda boleh mengulasnya, kesan pratonton adalah seperti berikut

Pada ketika ini kesan yang ingin kami capai telah selesai Jika masa berjalan terlalu lama, ia boleh menyebabkan penggunaan memori yang berlebihan dan menyebabkan ketinggalan Anda boleh Menyahkomen kandungan dalam komen terakhir dalam kod html, supaya salji di bawah perlahan-lahan akan hilang dan dialih keluar Saya tidak biarkan ia cair, seperti ini:

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci HTML CSS JS menyedari kepingan salji terbang (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!