JS和JQuery實現雪花飄落效果

來源：懂視網責編：小采時間：2020-11-27 22:24:29

JS和JQuery實現雪花飄落效果

JS和JQuery實現雪花飄落效果:很多朋友在做特效網頁的時候需要用到雪花飄落的效果，我們這里給大家整理了分別用JS還有JQuery兩種代碼實現這個效果的方式。我們先來看一下需要實現的雪花效果：這次實現的雪花飄落的效果很簡單，主要是為了練習練習JavaScript中的定時器，setTime

推薦度：

點擊下載本文 文檔為doc格式

導讀JS和JQuery實現雪花飄落效果:很多朋友在做特效網頁的時候需要用到雪花飄落的效果，我們這里給大家整理了分別用JS還有JQuery兩種代碼實現這個效果的方式。我們先來看一下需要實現的雪花效果：這次實現的雪花飄落的效果很簡單，主要是為了練習練習JavaScript中的定時器，setTime

很多朋友在做特效網頁的時候需要用到雪花飄落的效果，我們這里給大家整理了分別用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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS和JQuery實現雪花飄落效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現 js 效果

熱門焦點

JS和JQuery實現雪花飄落效果

JS和JQuery實現雪花飄落效果

JS和JQuery實現雪花飄落效果

最新推薦

猜你喜歡

熱門推薦