ホームページ > 記事 > ウェブフロントエンド > JQueryを使って雪の結晶を降らせる方法

JQueryを使って雪の結晶を降らせる方法

亚连オリジナル: 2018-06-23 14:56:111431ブラウズ

この記事では、JS と JQuery を使用して、降る雪の結晶のアニメーション効果を実現する方法を主に説明します。

特殊効果の Web ページを作成するときに、降る雪の結晶の効果を使用する必要がある人はたくさんいます。ここでは、JS および JQuery コードを使用してこの効果を実現する方法をまとめました。

まず、実装する必要がある雪の結晶エフェクトを見てみましょう:

今回実装した雪の結晶の降るエフェクトは非常に単純で、主に JavaScript のタイマー、setTimeout、setInterval を練習するためのものです。

説明

setTimeout()

setTimeout 関数は、関数または特定のコード部分が実行されるまでのミリ秒数を指定するために使用されます。タイマー番号を表す整数を返します。これは後でタイマーをキャンセルするために使用できます。

var timerId = setTimeout(func|code, delay)

上記のコードでは、setTimeout 関数は 2 つのパラメーターを受け取ります。最初のパラメーター func|code は遅延する関数の名前またはコードの一部であり、2 番目のパラメーター遅延は実行を遅延するミリ秒数です。

setInterval()

setInterval 関数の使用法は setTimeout とまったく同じです。唯一の違いは、setInterval がタスクを 1 回おきに実行することを指定し、スケジュールされた実行回数に制限がないことです。

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. 雪の結晶を生成するための最初のタイマー (定期タイマー) を設定します。時々
3. 2 番目のタイマー (1 回限りのタイマー) を設定します。最初のタイマーが雪の結晶を生成してページ上にレンダリングするときに、雪の結晶を移動させるように変更します。タイマー装置は、雪が降ったら、雪の結晶を削除します。

上記は実装のアイデアです。以下のコードは JS のネイティブコードです。アイデアは同じです。

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

注:

タイマーによって追加されたイベントは次のイベントループで実行されるため、2 番目のタイマーの機能は、生成された雪の結晶をページに結合して最初にレンダリングし、次にそのスタイルのみを変更することです。この方法で移動できます。タイマーがない場合、ブラウザはページをレンダリングする前にすべての JS コードを実行します。この場合、後続のスタイルは前のスタイルを直接上書きし、スノーフレークは移動できません。それはブラウザのスレッドと関係があります。

簡単に言うと、このタイマーを使用すると、スタイルを 2 回変更するコードを別々に実行でき、最初に変更したスタイルをレンダリングしてから 2 回目の変更を行うと、雪の結晶が移動します。

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でドロップダウンメニューを実装する方法

WeChatアプレットでスワイパーコンポーネントを使用する方法

使い方グローバルメソッド .use() コンポーネントを通じて Vue を使用します

以上がJQueryを使って雪の結晶を降らせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：vue コンポーネントを npm に公開する方法次の記事：vue コンポーネントを npm に公開する方法

続きを見る