先看一下運作效果 https://img-blog.csdnimg.cn/20210201203415683.gif#pic_center 這裡我用的編譯軟體是HBuilder X，隻用到了一張雪花圖檔snow.png,中間兩個不用管,是我上課的其他内容,雪花圖檔我放在這裡了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #000000;
margin: 0;/* 去掉自帶的外邊距 */
}
img{
position: absolute;
}
</style>
</head>
<body>
<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//開啟定時器添加雪花圖檔
setInterval(function(){
var img = $("<img src='snow.png'>");
$("body").append(img);
//設定雪花的尺寸20- 40px
//0-20 + 20
var size = parseInt(Math.random()*21)+20;
img.css("width",size+"px");
//得到螢幕寬度
var w = $(window).width();
//取值範圍應該是0-螢幕寬度-雪花寬度
var left =parseInt(Math.random()*(w-size));
//把得到的随機1eft給到圖檔
img.css("left",left+"px");
//添加雪花移動的動畫
//得到雪花移動的距離 = 螢幕高度-雪花尺寸
var top = $(window).height()-size;
img.animate({"top":top+"px"},size*100)/* .fadeOut(1000,function(){
//當動畫完成時執行此代碼
img.remove();
//console.log($("img").length);
}); */
},10)
</script>
</body>
</html>
直接運作的話可能顯示的雪花偏大,如下面第一張圖,這時我們可以在代碼中将雪花尺寸設定小一些,或者選擇在浏覽器中運作,然後調一下頁面的大小,運作效果就是下面第二張圖的樣子了
到這裡我們要實作的效果就完成了,如果運作時間過長可能會導緻記憶體占用過多造成卡頓現象,可以将html代碼中的最後一段注釋裡的内容取消注釋,這樣到下面的積雪就會慢慢淡出并且remove删除了,不過我覺得積雪也挺好看的,就沒讓它融化.如果還有什麼問題可以私信我,後續我也還會一直更新
源碼擷取方式：
1.CSDN下載下傳
https://download.csdn.net/download/qq_44273429/12783712