jQuery插件 飘雪效果 圣诞来临给你的网站装点下吧？

如果您在此刻浏览本站. 降看到雪花纷飞的效果.

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

也可以下载这里:https://files.cnblogs.com/noyobo/snowfall.jquery.rar

本站使用的是 :https://files.cnblogs.com/noyobo/snowfall.jquery.js

经过我修改的使用方法:

$(document).snowfall({yous options});
/*  flakeCount : 35, 雪花的个数
        flakeColor : '#ffffff', 雪花的颜色
        flakeIndex: 999999,
        minSize : 1, 最小尺寸
        maxSize : 2, 最大尺寸
        minSpeed : 1, 最小位移
        maxSpeed : 5, 最大位移
        shadow : false, 是否显示阴影
        snowType: "pic", // pic | shape | round 3种类型
        picUrl: '', 图片的路径 开启 snowType == pic 指定的路径
        collection : false,  是否收集
        collectionHeight : 40 收集容器 的 高度.
        intTime:80 移动的速度.
*/

经过我修改的 .一些参数兼容 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 }

snowType 有3中类型.

pic 为图片. shape 图形 snowShape:["❈","✲","❉","❄"] 为一个图形 unicode码. round 为圆点. 就是本网站现在使用的效果.

由于使用 border-radiue css3特性不兼容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 }

如果是IE系列 则替换为 ● 符号. 来实现圆点雪花效果. 否则使用 border-radius 修饰圆点.

当 shadow:ture 的时候 会呈现阴影.如本站所实例

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 }

完整示例下载

/* flakeCount : 35, 雪花的个数

flakeColor : '#ffffff', 雪花的颜色

flakeIndex: 999999,

minSize : 1, 最小尺寸

maxSize : 2, 最大尺寸

minSpeed : 1, 最小位移

maxSpeed : 5, 最大位移

shadow : false, 是否显示阴影

picUrl: '', 图片的路径 开启 snowType == pic 指定的路径

collection : false, 是否收集

collectionHeight : 40 收集容器 的 高度.

intTime:80 移动的速度.

*/