试过safari 和chrome都兼容
js代码
//(function($){})(jQuery)参数为$的匿名函数,实参为jQuery
(function($){
//$.fn.xx 扩展jQuery元素得到新的snow方法
$.fn.snow = function (options) {
//var $x = $('<div id = "xxx"/>').css({...,...}).html('')新建一个div元素并设计样式,不过为什么没有appendTo()?
var $flake = $('<div id = "snowbox"/>').css({'position':'absolute','top':'-50px','z-index':'9999'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
// 雪花最小、最大尺寸、出现频率、雪花颜色
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor: "#AFDAEF"
},
// 将一个新的空对象({})做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。
options = $.extend({}, defaults, options);
//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
var interval = setInterval(function () {
var startPositionLeft = Math.random() * documentWidth -100 ,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight -100,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
//自由下落持续时间
durationFall = documentHeight * 10 + Math.random() * 5000;
//appendTo():在body内部结尾处插入flake的克隆,并设置css样式,opacity:透明度,0——100;
$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(){})页面载入后执行其中的代码,完整形式为$(document).ready(function(){})
//$.fn.snow({})
$(function(){
$.fn.snow({
minSize:5,
maxSize:50,
newOn:300
});
});