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