溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript如何實現雪花飄落效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript如何實現雪花飄落效果”吧!
效果圖：
代碼：
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> body { background-color: #000; /*防止出現向下滾動條*/ overflow: hidden; } </style>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script> function snow() {
//1、定義一片雪花模板
var flake = $("<div>").css({ "position": "absolute", "color": "#fff" }).html("?");
//獲取頁面的寬度，利用這個數來算出，雪花開始時left的值
var documentWidth = $(document).width();
//獲取頁面的高度 相當于雪花下落結束時Y軸的位置
var documentHieght = $(document).height();
//定義生成一片雪花的毫秒數
var millisec = 100;
//2、設置第一個定時器，周期性定時器，每隔一段時間（millisec）生成一片雪花；
setInterval(function() {
//隨機生成雪花下落 開始 時left的值，相當于開始時X軸的位置
var startLeft = Math.random() * documentWidth;
//隨機生成雪花下落 結束 時left的值，相當于結束時X軸的位置
var endLeft = Math.random() * documentWidth;
//隨機生成雪花大小
var flakeSize = 5 + 20 * Math.random();
//隨機生成雪花下落持續時間
var durationTime = 4000 + 7000 * Math.random();
//隨機生成雪花下落 開始 時的透明度
var startOpacity = 0.7 + 0.3 * Math.random();
//隨機生成雪花下落 結束 時的透明度
var endOpacity = 0.2 + 0.2 * Math.random();
//3、克隆一個雪花模板,定義雪花的初始樣式，拼接到頁面中
flake.clone().appendTo($("body")).css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": "-25px", }).animate({
//執行動畫
"left": endLeft, "opacity": endOpacity, "top": documentHieght }, durationTime, function() {
//4、當雪花落下后，刪除雪花。
$(this).remove();
});
}, millisec);
};
snow();
</script>
</body>
</html>到此，相信大家對“JavaScript如何實現雪花飄落效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
