首頁 > 文章 > web前端 > 使用JQuery如何實現雪花飄落

使用JQuery如何實現雪花飄落

亚连原創: 2018-06-23 14:56:111429瀏覽

本文主要跟大家講述如何用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(&#39;p&#39;);
      // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
      flake.innerHTML = &#39;❆&#39;;
      flake.style.cssText = &#39;position:absolute;color:#fff;&#39;;

      //获取页面的高度 相当于雪花下落结束时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 = $("<p>").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>

上面是我整理給大家的，希望今後對大家有幫助。

在vue中如何使用路由參數傳遞

在jQuery如何實作下拉選單

在微信小程式中如何使用swiper元件

如何透過全域方法使用Vue.use()元件

以上是使用JQuery如何實現雪花飄落的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery Event 线程 JS 事件微信小程序

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何把vue元件發佈到npm上下一篇：如何把vue元件發佈到npm上

看更多