溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS和JQuery如何實現雪花飄落效果”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JS和JQuery如何實現雪花飄落效果”這篇文章吧。
很多朋友在做特效網頁的時候需要用到雪花飄落的效果，我們這里給大家整理了分別用JS還有JQuery兩種代碼實現這個效果的方式。
我們先來看一下需要實現的雪花效果：
這次實現的雪花飄落的效果很簡單，主要是為了練習練習JavaScript中的定時器，setTimeout 和 setInterval。
解釋
setTimeout()
setTimeout函數用來指定某個函數或某段代碼，在多少毫秒之后執行。它返回一個整數，表示定時器的編號，以后可以用來取消這個定時器。
var timerId = setTimeout(func|code, delay)
上面代碼中，setTimeout函數接受兩個參數，第一個參數func|code是將要推遲執行的函數名或者一段代碼，第二個參數delay是推遲執行的毫秒數。
setInterval()
setInterval函數的用法與setTimeout完全一致，區別僅僅在于setInterval指定某個任務每隔一段時間就執行一次，也就是無限次的定時執行。
clearTimeout()，clearInterval()
setTimeout和setInterval函數，都返回一個表示計數器編號的整數值，將該整數傳入clearTimeout和clearInterval函數，就可以取消對應的定時器。
var id1 = setTimeout(f,1000); var id2 = setInterval(f,1000); clearTimeout(id1); clearInterval(id2);
注意：
setTimeout 和 setInterval 必須要等到當前腳本的同步任務和“任務隊列”中已有的事件，全部處理完以后，才會執行setTimeout指定的任務。
我們繼續說實現雪花飄落的效果
主要是以下4步：
1、定義一片雪花模板；
2、設置第一個定時器，周期性定時器，每隔一段時間生成一片雪花；
3、設置第二個定時器，一次性定時器，當第一個定時器生成雪花，并在頁面上渲染出來后，修改雪花的樣式，讓雪花動起來；
4、設置第三個定時器，當雪花落下后，刪除雪花。
上面是實現的思路，下面寫出具體的代碼，下面的代碼是JS原生代碼，最后會附上JQuery實現的代碼，思路都一樣。
<!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>
function snow() {
// 1、定義一片雪花模板
var flake = document.createElement('div');
// 雪花字符 ???????????
flake.innerHTML = '?';
flake.style.cssText = 'position:absolute;color:#fff;';
//獲取頁面的高度 相當于雪花下落結束時Y軸的位置
var documentHieght = window.innerHeight;
//獲取頁面的寬度，利用這個數來算出，雪花開始時left的值
var documentWidth = window.innerWidth;
//定義生成一片雪花的毫秒數
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();
//克隆一個雪花模板
var cloneFlake = flake.cloneNode(true);
//第一次修改樣式，定義克隆出來的雪花的樣式
cloneFlake.style.cssText += `
left: ${startLeft}px;
opacity: ${startOpacity};
font-size:${flakeSize}px;
top:-25px;
transition:${durationTime}ms;
`;
//拼接到頁面中
document.body.appendChild(cloneFlake);
//設置第二個定時器，一次性定時器，
//當第一個定時器生成雪花，并在頁面上渲染出來后，修改雪花的樣式，讓雪花動起來；
setTimeout(function() {
//第二次修改樣式
cloneFlake.style.cssText += `
left: ${endLeft}px;
top:${documentHieght}px;
opacity:${endOpacity};
`;
//4、設置第三個定時器，當雪花落下后，刪除雪花。
setTimeout(function() {
cloneFlake.remove();
}, durationTime);
}, 0);
}, millisec);
}
snow();
</script>
</body>
</html>注意：
因為定時器添加的事件，會在下一次Event Loop執行，所以第二個定時器的作用是為了讓生成的雪花先拼接到頁面中渲染出來后，再修改他的樣式，這樣才能讓他動起來，如果沒有這個定時器，瀏覽器會把所有的JS代碼都執行完之后才渲染頁面，這樣的話后面的樣式就直接覆蓋前面的樣式了，雪花就沒法動了，這和瀏覽器的線程有關系。
簡單說，意思就是用了這個定時器，能把兩次修改樣式的代碼分開執行，可以先把第一次修改的樣式渲染后，在進行第二次的修改，雪花就會動了。
JQuery版
<!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>以上是“JS和JQuery如何實現雪花飄落效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
