Maison > Article > interface Web > Comment obtenir un effet d'animation de neige dans jQuery

Comment obtenir un effet d'animation de neige dans jQuery

亚连original: 2018-06-08 11:21:281729parcourir

Cet article présente principalement l'effet d'animation de neige implémenté par jQuery, impliquant l'utilisation du plug-in jQuery combiné avec setInterval et animate pour les opérations d'animation. Il est également livré avec un code source que les lecteurs peuvent télécharger et consulter. référez-vous à lui

L'exemple de cet article décrit l'effet d'animation de neige implémenté par jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

partie html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- snow -->
    <script src="js/jquery.snow.js"></script>
  </head>
  <body>
    <p id="content-wrapper">
     <p class="inner clearfix">
      <section id="main-content">
       <img src="images/merry_christmasA.jpg" alt="chrismas">
      </section>
     </p>
    </p>
    <script>
     $(document).ready( function(){
     $.fn.snow( { minSize: 2, maxSize: 150, newOn: 200, flakeColor: &#39;#FFFFFF&#39; } );
     });
    </script>
    </body>
</html>

jquery.snow.js :

/**
 * jquery.snow - jQuery Snow Effect Plugin
 *
 * Available under MIT licence
 *
 * @version 1 (21. Jan 2012)
 * @author Ivan Lazarevic
 * @requires jQuery
 * @see http://workshop.rs
 *
 * @params minSize - min size of snowflake, 10 by default
 * @params maxSize - max size of snowflake, 20 by default
 * @params newOn - frequency in ms of appearing of new snowflake, 500 by default
 * @params flakeColor - color of snowflake, #FFFFFF by default
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });
 */
(function($){
  $.fn.snow = function(options){
      var $flake     = $(&#39;<p id="flake" />&#39;).css({&#39;position&#39;: &#39;absolute&#39;, &#39;top&#39;: &#39;-50px&#39;}).html(&#39;❄&#39;),
        documentHeight = $(document).height(),
        documentWidth  = $(document).width(),
        defaults    = {
                  minSize   : 10,
                  maxSize   : 20,
                  newOn    : 500,
                  flakeColor : "#FFFFFF"
                },
        options     = $.extend({}, defaults, options);
      //setInterval-setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
      //开始一个周期-开始添加雪花
      var interval    = setInterval( function(){
        var startPositionLeft  = Math.random() * documentWidth - 100,
          startOpacity    = 0.5 + Math.random(),
          sizeFlake      = options.minSize + Math.random() * options.maxSize,
          endPositionTop   = documentHeight - 40,
          endPositionLeft   = startPositionLeft - 100 + Math.random() * 200,
          durationFall    = documentHeight * 10 + Math.random() * 5000;
        $flake
          .clone()
          .appendTo(&#39;body&#39;)
          .css(
            {
              left: startPositionLeft,
              opacity: startOpacity,
              &#39;font-size&#39;: sizeFlake,
              color: options.flakeColor
            }
          )
          .animate(//增加雪花动态效果
            {
              top: endPositionTop,
              left: endPositionLeft,
              opacity: 0.2
            },
            durationFall,
            &#39;linear&#39;,
            function() {
              $(this).remove()
            }
          );
      }, options.newOn);
      //结束周期-停止添加雪花
      setTimeout(function(){
        window.clearInterval(interval);
      },5000);
  };
})(jQuery);

Pas de style CSS requis

Principalement utilisé : La méthode setInterval-setInterval() peut appeler une fonction ou calculer une expression selon une période spécifiée (en millisecondes). & animer l'animation

effet de course :

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

Articles associés :

Comment utiliser les ECharts dans webpack ?

Diagramme de base de la méthode interne d'Object en JavaScript (tutoriel graphique)

Utilisez axios pour encapsuler la méthode fetch et appelez

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!

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：Utilisation des composants vue dans des cas pratiquesArticle suivant：Utilisation des composants vue dans des cas pratiques

Articles Liés

Voir plus