How to achieve snow animation effect in jQuery-JS Tutorial-php.cn

How to achieve snow animation effect in jQuery

亚连

Release： 2018-06-08 11:21:28

Original

1709 people have browsed it

This article mainly introduces the snow animation effect implemented by jQuery, involving the related usage skills of jQuery plug-in combined with setInterval and animate for animation operation, and comes with source code for readers to download and refer to. Friends who need it can refer to it

The example in this article describes the snow animation effect implemented by jQuery. Share it with everyone for your reference, the details are as follows:

html part:

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

Copy after login

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);

Copy after login

No css style required

Main Used: setInterval-setInterval() The method can call a function or calculate an expression according to the specified period (in milliseconds). & animate animation

Operation effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use ECharts in webpack?

Basic internal method diagram of Object in JavaScript (graphic tutorial)

Use axios to encapsulate the fetch method and call

The above is the detailed content of How to achieve snow animation effect in jQuery. For more information, please follow other related articles on the PHP Chinese website!