网页添加雪花飘落效果

网站站点添加雪花飘落效果，本段js代码依赖 JQurey，如果没效果，请确认网页是否已载入 JQurey

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_1c4228b8.js"></script>
</head>
<body>
    <div style="width: 100%;height: 6000px;background: #2EC3E7;"></div>
    <script type="text/javascript">
        (function($){
           $.fn.snow = function(options){
           var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
           documentHeight     = $(document).height(),
           documentWidth  = $(document).width(),
           defaults = {
              minSize   : 10,
              maxSize   : 20,
              newOn     : 1000,
              flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
           },
           options = $.extend({}, defaults, options);
           var interval= setInterval( function(){
           var startPositionLeft = Math.random() * documentWidth - 100,
           startOpacity = 0.5 + Math.random(),
           sizeFlake = options.minSize + Math.random() * options.maxSize,
           endPositionTop = documentHeight - 200,
           endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
           durationFall = documentHeight * 10 + Math.random() * 5000;
           $flake.clone().appendTo('body').css({
              left: startPositionLeft,
              opacity: startOpacity,
              'font-size': sizeFlake,
              color: options.flakeColor
           }).animate({
              top: endPositionTop,
              left: endPositionLeft,
              opacity: 0.2
           },durationFall,'linear',function(){
                $(this).remove()
           });
           }, options.newOn);
            };
            })(jQuery);
        $(function(){
            $.fn.snow({
               minSize: 5, /* 定义雪花最小尺寸 */
               maxSize: 50,/* 定义雪花最大尺寸 */
               newOn: 300  /* 定义密集程度，数字越小越密集 */
            });
        });
        </script>
</body>
</html>

网页添加雪花飘落效果

代码

编写第一个jquery插件

使用html2canvas将HTML内容生成图片

JS实现网页区域打印

单线程的 Javascript 为什么可以异步