JS和JQuery實(shí)現(xiàn)雪花飄落效果

更新時(shí)間：2017年11月30日 14:27:53 投稿：laozhang

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

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

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

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

解釋

setTimeout()

setTimeout函數(shù)用來指定某個(gè)函數(shù)或某段代碼，在多少毫秒之后執(zhí)行。它返回一個(gè)整數(shù)，表示定時(shí)器的編號(hào)，以后可以用來取消這個(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í)行一次，也就是無限次的定時(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ù)說實(shí)現(xiàn)雪花飄落的效果

主要是以下4步：

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

上面是實(shí)現(xiàn)的思路，下面寫出具體的代碼，下面的代碼是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('div');
      // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
      flake.innerHTML = '❆';
      flake.style.cssText = 'position:absolute;color:#fff;';

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

      //定義生成一片雪花的毫秒數(shù)
      var millisec = 100;
      //2、設(shè)置第一個(gè)定時(shí)器，周期性定時(shí)器，每隔一段時(shí)間（millisec）生成一片雪花；
      setInterval(function() { //頁(yè)面加載之后，定時(shí)器就開始工作
        //隨機(jī)生成雪花下落 開始 時(shí)left的值，相當(dāng)于開始時(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ī)生成雪花下落 開始 時(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);

        //第一次修改樣式，定義克隆出來的雪花的樣式
        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è)面上渲染出來后，修改雪花的樣式，讓雪花動(dòng)起來；
        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è)面中渲染出來后，再修改他的樣式，這樣才能讓他動(dòng)起來，如果沒有這個(gè)定時(shí)器，瀏覽器會(huì)把所有的JS代碼都執(zhí)行完之后才渲染頁(yè)面，這樣的話后面的樣式就直接覆蓋前面的樣式了，雪花就沒法動(dòng)了，這和瀏覽器的線程有關(guān)系。

簡(jiǎn)單說，意思就是用了這個(gè)定時(shí)器，能把兩次修改樣式的代碼分開執(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 = $("<div>").css({
        "position": "absolute",
        "color": "#fff"
      }).html("❄");

      //獲取頁(yè)面的寬度，利用這個(gè)數(shù)來算出，雪花開始時(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ī)生成雪花下落 開始 時(shí)left的值，相當(dāng)于開始時(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ī)生成雪花下落 開始 時(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)畫
          "left": endLeft,
          "opacity": endOpacity,
          "top": documentHieght
        }, durationTime, function() {
          //4、當(dāng)雪花落下后，刪除雪花。
          $(this).remove(); 
        });
      }, millisec);
    };
    snow();
  </script>
</body>
</html>

您可能感興趣的文章: