使用JQuery如何實(shí)現(xiàn)雪花飄落

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:35:22

使用JQuery如何實(shí)現(xiàn)雪花飄落

使用JQuery如何實(shí)現(xiàn)雪花飄落:本文主要給大家講述了如何用JS和JQuery兩種方式實(shí)現(xiàn)雪花飄落的動(dòng)畫(huà)效果，有需要的朋友收藏一下吧。很多朋友在做特效網(wǎng)頁(yè)的時(shí)候需要用到雪花飄落的效果，我們這里給大家整理了分別用JS還有JQuery兩種代碼實(shí)現(xiàn)這個(gè)效果的方式。我們先來(lái)看一下需要實(shí)現(xiàn)的雪花效果

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀使用JQuery如何實(shí)現(xiàn)雪花飄落:本文主要給大家講述了如何用JS和JQuery兩種方式實(shí)現(xiàn)雪花飄落的動(dòng)畫(huà)效果，有需要的朋友收藏一下吧。很多朋友在做特效網(wǎng)頁(yè)的時(shí)候需要用到雪花飄落的效果，我們這里給大家整理了分別用JS還有JQuery兩種代碼實(shí)現(xiàn)這個(gè)效果的方式。我們先來(lái)看一下需要實(shí)現(xiàn)的雪花效果

本文主要給大家講述了如何用JS和JQuery兩種方式實(shí)現(xiàn)雪花飄落的動(dòng)畫(huà)效果，有需要的朋友收藏一下吧。

很多朋友在做特效網(wǎng)頁(yè)的時(shí)候需要用到雪花飄落的效果，我們這里給大家整理了分別用JS還有JQuery兩種代碼實(shí)現(xiàn)這個(gè)效果的方式。

我們先來(lái)看一下需要實(shí)現(xiàn)的雪花效果：

這次實(shí)現(xiàn)的雪花飄落的效果很簡(jiǎn)單，主要是為了練習(xí)練習(xí)JavaScript中的定時(shí)器，setTimeout 和 setInterval。

解釋

setTimeout()

setTimeout函數(shù)用來(lái)指定某個(gè)函數(shù)或某段代碼，在多少毫秒之后執(zhí)行。它返回一個(gè)整數(shù)，表示定時(shí)器的編號(hào)，以后可以用來(lái)取消這個(gè)定時(shí)器。

var timerId = setTimeout(func|code, delay)

上面代碼中，setTimeout函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)func|code是將要推遲執(zhí)行的函數(shù)名或者一段代碼，第二個(gè)參數(shù)delay是推遲執(zhí)行的毫秒數(shù)。

setInterval()

setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個(gè)任務(wù)每隔一段時(shí)間就執(zhí)行一次，也就是無(wú)限次的定時(shí)執(zhí)行。

clearTimeout()，clearInterval()

setTimeout和setInterval函數(shù)，都返回一個(gè)表示計(jì)數(shù)器編號(hào)的整數(shù)值，將該整數(shù)傳入clearTimeout和clearInterval函數(shù)，就可以取消對(duì)應(yīng)的定時(shí)器。

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);

注意：

setTimeout 和 setInterval 必須要等到當(dāng)前腳本的同步任務(wù)和“任務(wù)隊(duì)列”中已有的事件，全部處理完以后，才會(huì)執(zhí)行setTimeout指定的任務(wù)。

我們繼續(xù)說(shuō)實(shí)現(xiàn)雪花飄落的效果

主要是以下4步：

1、定義一片雪花模板；
2、設(shè)置第一個(gè)定時(shí)器，周期性定時(shí)器，每隔一段時(shí)間生成一片雪花；
3、設(shè)置第二個(gè)定時(shí)器，一次性定時(shí)器，當(dāng)?shù)谝粋€(gè)定時(shí)器生成雪花，并在頁(yè)面上渲染出來(lái)后，修改雪花的樣式，讓雪花動(dòng)起來(lái)；
4、設(shè)置第三個(gè)定時(shí)器，當(dāng)雪花落下后，刪除雪花。

上面是實(shí)現(xiàn)的思路，下面寫(xiě)出具體的代碼，下面的代碼是JS原生代碼，最后會(huì)附上JQuery實(shí)現(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)向下滾動(dòng)條*/
 overflow: hidden;
 }
 </style>
</head>

<body>
 <script>
 function snow() {
 // 1、定義一片雪花模板
 var flake = document.createElement('p');
 // 雪花字符 ???????????
 flake.innerHTML = '?';
 flake.style.cssText = 'position:absolute;color:#fff;';

 //獲取頁(yè)面的高度 相當(dāng)于雪花下落結(jié)束時(shí)Y軸的位置
 var documentHieght = window.innerHeight;
 //獲取頁(yè)面的寬度，利用這個(gè)數(shù)來(lái)算出，雪花開(kāi)始時(shí)left的值
 var documentWidth = window.innerWidth;

 //定義生成一片雪花的毫秒數(shù)
 var millisec = 100;
 //2、設(shè)置第一個(gè)定時(shí)器，周期性定時(shí)器，每隔一段時(shí)間（millisec）生成一片雪花；
 setInterval(function() { //頁(yè)面加載之后，定時(shí)器就開(kāi)始工作
 //隨機(jī)生成雪花下落 開(kāi)始 時(shí)left的值，相當(dāng)于開(kāi)始時(shí)X軸的位置
 var startLeft = Math.random() * documentWidth;

 //隨機(jī)生成雪花下落 結(jié)束 時(shí)left的值，相當(dāng)于結(jié)束時(shí)X軸的位置
 var endLeft = Math.random() * documentWidth;

 //隨機(jī)生成雪花大小
 var flakeSize = 5 + 20 * Math.random();

 //隨機(jī)生成雪花下落持續(xù)時(shí)間
 var durationTime = 4000 + 7000 * Math.random();

 //隨機(jī)生成雪花下落 開(kāi)始 時(shí)的透明度
 var startOpacity = 0.7 + 0.3 * Math.random();

 //隨機(jī)生成雪花下落 結(jié)束 時(shí)的透明度
 var endOpacity = 0.2 + 0.2 * Math.random();

 //克隆一個(gè)雪花模板
 var cloneFlake = flake.cloneNode(true);

 //第一次修改樣式，定義克隆出來(lái)的雪花的樣式
 cloneFlake.style.cssText += `
 left: ${startLeft}px;
 opacity: ${startOpacity};
 font-size:${flakeSize}px;
 top:-25px;
 transition:${durationTime}ms;
 `;

 //拼接到頁(yè)面中
 document.body.appendChild(cloneFlake);

 //設(shè)置第二個(gè)定時(shí)器，一次性定時(shí)器，
 //當(dāng)?shù)谝粋€(gè)定時(shí)器生成雪花，并在頁(yè)面上渲染出來(lái)后，修改雪花的樣式，讓雪花動(dòng)起來(lái)；
 setTimeout(function() {
 //第二次修改樣式
 cloneFlake.style.cssText += `
 left: ${endLeft}px;
 top:${documentHieght}px;
 opacity:${endOpacity};
 `;

 //4、設(shè)置第三個(gè)定時(shí)器，當(dāng)雪花落下后，刪除雪花。
 setTimeout(function() {
 cloneFlake.remove();
 }, durationTime);
 }, 0);

 }, millisec);
 }
 snow();
 </script>
</body>
</html>

注意：

因?yàn)槎〞r(shí)器添加的事件，會(huì)在下一次Event Loop執(zhí)行，所以第二個(gè)定時(shí)器的作用是為了讓生成的雪花先拼接到頁(yè)面中渲染出來(lái)后，再修改他的樣式，這樣才能讓他動(dòng)起來(lái)，如果沒(méi)有這個(gè)定時(shí)器，瀏覽器會(huì)把所有的JS代碼都執(zhí)行完之后才渲染頁(yè)面，這樣的話后面的樣式就直接覆蓋前面的樣式了，雪花就沒(méi)法動(dòng)了，這和瀏覽器的線程有關(guān)系。

簡(jiǎn)單說(shuō)，意思就是用了這個(gè)定時(shí)器，能把兩次修改樣式的代碼分開(kāi)執(zhí)行，可以先把第一次修改的樣式渲染后，在進(jìn)行第二次的修改，雪花就會(huì)動(dòng)了。

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)向下滾動(dòng)條*/
 overflow: hidden;
 }
 </style>
</head>

<body>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
 <script>
 function snow() {
 //1、定義一片雪花模板
 var flake = $("<p>").css({
 "position": "absolute",
 "color": "#fff"
 }).html("?");

 //獲取頁(yè)面的寬度，利用這個(gè)數(shù)來(lái)算出，雪花開(kāi)始時(shí)left的值
 var documentWidth = $(document).width();

 //獲取頁(yè)面的高度 相當(dāng)于雪花下落結(jié)束時(shí)Y軸的位置
 var documentHieght = $(document).height();

 //定義生成一片雪花的毫秒數(shù)
 var millisec = 100;
 //2、設(shè)置第一個(gè)定時(shí)器，周期性定時(shí)器，每隔一段時(shí)間（millisec）生成一片雪花；
 setInterval(function() {
 //隨機(jī)生成雪花下落 開(kāi)始 時(shí)left的值，相當(dāng)于開(kāi)始時(shí)X軸的位置
 var startLeft = Math.random() * documentWidth;

 //隨機(jī)生成雪花下落 結(jié)束 時(shí)left的值，相當(dāng)于結(jié)束時(shí)X軸的位置
 var endLeft = Math.random() * documentWidth;

 //隨機(jī)生成雪花大小
 var flakeSize = 5 + 20 * Math.random();

 //隨機(jī)生成雪花下落持續(xù)時(shí)間
 var durationTime = 4000 + 7000 * Math.random();

 //隨機(jī)生成雪花下落 開(kāi)始 時(shí)的透明度
 var startOpacity = 0.7 + 0.3 * Math.random();

 //隨機(jī)生成雪花下落 結(jié)束 時(shí)的透明度
 var endOpacity = 0.2 + 0.2 * Math.random();

 //3、克隆一個(gè)雪花模板,定義雪花的初始樣式，拼接到頁(yè)面中
 flake.clone().appendTo($("body")).css({
 "left": startLeft,
 "opacity": startOpacity,
 "font-size": flakeSize,
 "top": "-25px",
 }).animate({ //執(zhí)行動(dòng)畫(huà)
 "left": endLeft,
 "opacity": endOpacity,
 "top": documentHieght
 }, durationTime, function() {
 //4、當(dāng)雪花落下后，刪除雪花。
 $(this).remove(); 
 });
 }, millisec);
 };
 snow();
 </script>
</body>
</html>

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

在vue中如何使用路由參數(shù)傳遞

在jQuery中如何實(shí)現(xiàn)下拉菜單

在微信小程序中如何使用swiper組件

如何通過(guò)全局方法使用Vue.use()組件

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com