如果您在此刻浏览本站. 降看到雪花纷飞的效果.
来源: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处理的.
switch(options.snowType){
case "pic":
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");
break;
case "shape":
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)]);
break;
default:
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});
}
snowType 有3中类型.
pic 为图片. shape 图形 snowShape:["❈","✲","❉","❄"] 为一个图形 unicode码. round 为圆点. 就是本网站现在使用的效果.
由于使用 border-radiue css3特性不兼容IE 特增加以下代码:
if(options.snowType == "round"){
if($.browser.msie){
$('.snowfall-flakes').text(String.fromCharCode(9679)).css({'color':options.flakeColor});
}else{
$('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize,'background-color':options.flakeColor});
}
}
如果是IE系列 则替换为 ● 符号. 来实现圆点雪花效果. 否则使用 border-radius 修饰圆点.
当 shadow:ture 的时候 会呈现阴影.如本站所实例
if(options.shadow){
$('.snowfall-flakes').css({'-moz-box-shadow' : '1px 1px 1px #555', '-webkit-box-shadow' : '1px 1px 1px #555', 'box-shadow' : '1px 1px 1px #555'});
}
完整示例下载
/* 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 移动的速度.
*/
