Maison > Article > interface Web > Comment faire tomber des flocons de neige avec JQuery

Comment faire tomber des flocons de neige avec JQuery

亚连original: 2018-06-23 14:56:111468parcourir

Cet article vous explique principalement comment utiliser JS et JQuery pour obtenir l'effet d'animation de la chute des flocons de neige. Les amis dans le besoin peuvent le sauvegarder.

De nombreux amis ont besoin d'utiliser l'effet des flocons de neige qui tombent lors de la création de pages Web d'effets spéciaux. Nous avons compilé ici pour vous comment obtenir cet effet en utilisant les codes JS et JQuery.

Jetons d'abord un coup d'œil à l'effet flocon de neige qui doit être mis en œuvre :

L'effet de chute de neige mis en œuvre cette fois est très simple, principalement pour s'entraîner Minuteries JavaScript, setTimeout et setInterval.

Explication

setTimeout()

La fonction setTimeout est utilisée pour spécifier le nombre de millisecondes après lequel une fonction ou un certain morceau de code sera exécuté. Il renvoie un entier représentant le numéro du minuteur, qui peut être utilisé pour annuler le minuteur ultérieurement.

var timerId = setTimeout(func|code, delay)

Dans le code ci-dessus, la fonction setTimeout accepte deux paramètres. Le premier paramètre func|code est le nom de la fonction ou un morceau de code à retarder, et le deuxième paramètre delay est le numéro. de millisecondes pour retarder l'exécution.

setInterval()

L'utilisation de la fonction setInterval est exactement la même que celle de setTimeout. La seule différence est que setInterval spécifie qu'une certaine tâche doit être exécutée de temps en temps, ce qui correspond à un nombre illimité d'exécutions planifiées. Les fonctions

clearTimeout(), clearInterval()

setTimeout et setInterval renvoient toutes une valeur entière représentant le numéro du compteur. Passez l'entier dans les fonctions clearTimeout et clearInterval pour annuler le périphérique de synchronisation correspondant.

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

Remarque :

setTimeout et setInterval doivent attendre que les tâches de synchronisation du script actuel et les événements existants dans la "file d'attente des tâches" soient tous traités avant la tâche spécifiée par setTimeout.

Continuons à parler de l'obtention de l'effet de chute de flocons de neige

Les principales étapes sont les 4 étapes suivantes :

1. Définir un modèle de flocon de neige
2. le premier minuteur, un minuteur périodique qui génère un flocon de neige de temps en temps ;
3. Réglez le deuxième minuteur, un minuteur unique. Lorsque le premier minuteur génère des flocons de neige et les affiche sur la page, modifiez les flocons de neige. style pour faire bouger les flocons de neige ;
4. Réglez la troisième minuterie et supprimez les flocons de neige lorsqu'ils tombent.

Ce qui précède est l'idée d'implémentation. Le code spécifique est écrit ci-dessous. Le code suivant est le code natif JS. Enfin, le code d'implémentation JQuery sera joint.

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

Remarque :

Étant donné que l'événement ajouté par le minuteur sera exécuté dans la prochaine boucle d'événement, la fonction du deuxième minuteur est de permettre aux flocons de neige générés d'être épissés dans la page d'abord Après le rendu, modifiez son style pour qu'il puisse bouger. Sans ce timer, le navigateur exécutera tout le code JS avant le rendu de la page. Dans ce cas, les styles ultérieurs écraseront directement les styles précédents, le flocon de neige. ne peut pas bouger. Cela a quelque chose à voir avec le fil du navigateur.

Pour faire simple, cela signifie qu'en utilisant cette minuterie, le code pour modifier le style deux fois peut être exécuté séparément. Vous pouvez d'abord restituer le premier style modifié, puis effectuer la deuxième modification, et le flocon de neige le fera. Ça va bouger.

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment utiliser le passage des paramètres de route dans vue

Comment implémenter un menu déroulant dans jQuery

Comment utiliser le composant swiper dans l'applet WeChat

Comment utiliser le composant Vue.use() via la méthode globale

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment publier des composants vue sur npmArticle suivant：Comment publier des composants vue sur npm

Articles Liés

Voir plus