Float Your blog with snow (optimized version)

A few days ago, when I saw an article in the garden that float your blog with snow, I quickly got my blog to see the effect. Don't say it's pretty. But after reading it for a while, we found that the page became special.

After reading the code, I found that the original author kept inserting multiple small div snowflakes in the body and slowly floated down. after drifting down to the bottom of the body, I removed the snowflake.

However, in fact, we can't see any page that goes beyond the screen, even if the snow is floating, what is the significance.

Therefore, after slightly modifying the original code, let him just fall from the top of the screen to the bottom of the screen (not the bottom of the body), remove the snowflake, and change the snowflake to fixed.

It is much better to refresh the page. Now I want to share with you the modified Code.

Original Author link http://www.cnblogs.com/lhb25/archive/2012/12/25/jquery-snow-falling-effect.html (thanks @ dream sky (Hill edge Creek) provided)

(function($){    $.fn.snow=function(options){        var $flake=$('<div />')            .css({                'position':'fixed',//'absolute',                'top':'-50px',                'z-index':'1000'                })            .html('&#10052;');        var documentHeight=document.documentElement.clientHeight;//$(document).height();        var documentWidth=$(document).width();        var defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"};        var options=$.extend({},defaults,options);        var interval=setInterval(function(){            var startPositionLeft=Math.random()*documentWidth-100;            var startOpacity=0.5+Math.random();            var sizeFlake=options.minSize+Math.random()*options.maxSize;            var endPositionTop=documentHeight-40;            var endPositionLeft=startPositionLeft-100+Math.random()*200;            var 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); $.fn.snow({ minSize: 10, maxSize: 50, newOn: 1000, flakeColor: '#ccc'});

I can see some garden friends asking how to use it. Now let's talk about how to use it:

In the blog garden background -- set -- footer html code-Add a script tag and put the above js Code in -- save.