Jquery plug-in, snow-like effect, Christmas coming, decorate your website

If you are visiting this site at the moment, you can see the effect of snow.

Source: http://www.somethinghitme.com/2011/10/05/jquery-snowfall-1-5-update-now-with-snow-buildup/

You can also download here: http://files.cnblogs.com/noyobo/snowfall.jquery.rar

This site is: http://files.cnblogs.com/noyobo/snowfall.jquery.js

My modified usage:

$ (Document ). snowfall ({yous options});/* flakecount: 35, number of snowflakes flakecolor: '# ffff', snowflake color flakeindex: 999999, minsize: 1, minimum size maxsize: 2, maximum size minspeed: 1, minimum displacement maxspeed: 5, maximum displacement shadow: false, whether to display shadow snowtype: "pic ", // PIC | shape | round three types of picurl: ''. Enable the image path snowtype = path collection specified by PIC: false. Whether to collect collectionheight: 40 the height of the collection container. inttime: 80 movement speed. */

Some parameters modified by me are compatible with IE.

 1 switch(options.snowType){
 2     case "pic":
 3          var flakeMarkup = $(document.createElement("img")).attr({'class': 'snowfall-flakes', 'id' : 'flake-' + this.id}).css({'width' : mathSize, 'height' : mathSize, 'position' : 'absolute', 'top' : this.y, 'left' : this.x, 'zIndex' : options.flakeIndex,'-ms-interpolation-mode': 'bicubic'}).attr("src",options.picUrl + "snow" + Math.floor(Math.random() * 4) + ".gif");
 4      break;
 5      case "shape":
 6           var flakeMarkup = $(document.createElement("div")).attr({'class': 'snowfall-flakes', 'id' : 'flake-' + this.id}).css({'width' : mathSize, 'height' : mathSize, 'position' : 'absolute', 'top' : this.y, 'left' : this.x, 'fontSize' : mathSize, 'zIndex' : options.flakeIndex, "color":options.flakeColor}).html(options.snowShape[Math.floor(Math.random() * 4)]);
 7      break;
 8      default:
 9           var flakeMarkup = $(document.createElement("div")).attr({'class': 'snowfall-flakes', 'id' : 'flake-' + this.id}).css({'width' : mathSize, 'height' : mathSize, 'position' : 'absolute', 'top' : this.y, 'left' : this.x, 'fontSize' : mathSize, 'zIndex' : options.flakeIndex});
10 }

The snowtype has three types.

PIC is an image. shape image snowshape: ["& #10056;", "& #10034;", "& #10057;", "& #10052;"] is a graphical Unicode code. round is a dot. is the current effect of this website.

The following code is added because the border-radiue css3 feature is not compatible with IE:

1 if(options.snowType == "round"){
2     if($.browser.msie){
3         $('.snowfall-flakes').text(String.fromCharCode(9679)).css({'color':options.flakeColor});
4     }else{
5           $('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize,'background-color':options.flakeColor});
6     }            
7 }

If it is an IE series, replace it with ● symbol to achieve the dot snowflake effect. Otherwise, use border-radius to modify the dot.

Shadow: true may be shadow, as shown in the following figure.

1 if(options.shadow){
2     $('.snowfall-flakes').css({'-moz-box-shadow' : '1px 1px 1px #555', '-webkit-box-shadow' : '1px 1px 1px #555', 'box-shadow' : '1px 1px 1px #555'});
3 }

Download complete example

/* Flakecount: 35, number of snowflakes
Flakecolor: '# ffff', snowflake color
Flakeindex: 999999,
Minsize: 1, minimum size
Maxsize: 2, maximum size
Minspeed: 1, minimum displacement
Maxspeed: 5, maximum displacement
Shadow: false. Whether to display shadow.
Picurl: ''. The image path is set to snowtype = path specified by PIC.
Collection: false, whether to collect
Collectionheight: 40 the height of the collection container.
Inttime: 80 movement speed.
*/