Wie man mit JQuery Schneeflocken fallen lässt-js-Tutorial-php.cn

In diesem Artikel erfahren Sie hauptsächlich, wie Sie mit JS und JQuery den Animationseffekt fallender Schneeflocken erzielen. Freunde in Not können ihn retten.

Viele Freunde müssen den Effekt fallender Schneeflocken nutzen, wenn sie Webseiten mit Spezialeffekten erstellen. Hier haben wir für Sie zusammengestellt, wie Sie diesen Effekt mithilfe von JS- und JQuery-Codes erzielen können.

Werfen wir zunächst einen Blick auf den Schneeflockeneffekt, der implementiert werden muss:

Der dieses Mal implementierte Effekt des fallenden Schnees ist sehr einfach, hauptsächlich zum Üben JavaScript. Timer, setTimeout und setInterval.

Erklärung

setTimeout()

Mit der setTimeout-Funktion wird die Anzahl der Millisekunden angegeben, nach denen eine Funktion oder ein bestimmter Code ausgeführt wird. Es gibt eine Ganzzahl zurück, die die Timer-Nummer darstellt und zum späteren Abbrechen des Timers verwendet werden kann.

var timerId = setTimeout(func|code, delay)

Nach dem Login kopieren

Im obigen Code akzeptiert die setTimeout-Funktion zwei Parameter. Der erste Parameter func|code ist der Name der Funktion oder eines Codeabschnitts, der verzögert werden soll, und der zweite Parameter „delay“ ist die Anzahl der Millisekunden die Ausführung verzögern.

setInterval()

Die Verwendung der setInterval-Funktion ist genau die gleiche wie die von setTimeout. Der einzige Unterschied besteht darin, dass setInterval angibt, dass eine bestimmte Aufgabe von Zeit zu Zeit ausgeführt werden soll. Das ist eine unbegrenzte Anzahl geplanter Hinrichtungen.

clearTimeout(), clearInterval()

setTimeout- und setInterval-Funktionen geben alle einen ganzzahligen Wert zurück, der die Zählernummer darstellt, um das entsprechende Timing-Gerät abzubrechen.

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

Nach dem Login kopieren

Hinweis:

setTimeout und setInterval müssen warten, bis die Synchronisierungsaufgaben des aktuellen Skripts und die vorhandenen Ereignisse in der „Aufgabenwarteschlange“ alle verarbeitet sind, bevor die durch setTimeout angegebene Aufgabe ausgeführt wird.

Lassen Sie uns weiter über die Wirkung fallender Schneeflocken sprechen

Die Hauptschritte sind die folgenden 4 Schritte:

1 Definieren Sie eine Schneeflockenvorlage
2. Stellen Sie den ersten Timer ein, einen periodischen Timer, der ab und zu eine Schneeflocke erzeugt . Stil, um die Schneeflocken in Bewegung zu setzen.
4. Stellen Sie den dritten Timer ein und löschen Sie die Schneeflocken, wenn sie fallen.

Das Obige ist die Implementierungsidee. Der folgende Code ist der native JS-Code. Die Ideen sind dieselben.

<!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>

Nach dem Login kopieren

Hinweis:

Da das vom Timer hinzugefügte Ereignis in der nächsten Ereignisschleife ausgeführt wird, besteht die Rolle des zweiten Timers darin, die generierten Schneeflocken in die Seite einzubinden und sie zuerst zu rendern . Ändern Sie schließlich den Stil, damit er den gesamten JS-Code ausführen kann, bevor er die Seite rendert. Dies ist nicht der Fall etwas mit dem Thread des Browsers zu tun.

Einfach ausgedrückt bedeutet dies, dass mit diesem Timer der Code zum Ändern des Stils zweimal separat ausgeführt werden kann. Sie können zuerst den ersten geänderten Stil rendern und dann die zweite Änderung vornehmen, und die Schneeflocke wird ausgeführt Es wird sich bewegen.

JQuery-Version

<!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>

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Routing-Parameter zur Übergabe von Vue

So implementieren Sie ein Dropdown-Menü in jQuery

So verwenden Sie die Swiper-Komponente im WeChat-Applet

So verwenden Sie die Vue.use()-Komponente über die globale Methode

Das obige ist der detaillierte Inhalt vonWie man mit JQuery Schneeflocken fallen lässt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!