实现思路
1.在一定的频率下在页面中生成一定数目的雪花从上往下飘落;
2.在指定的时间内飘落后移除页面;
3.可设置雪花的大小,在一定范围内随机雪花大小;
4.什么时间后清除生成雪花,停止函数。
js代码
(function($){
$.fn.snow = function(options){
var $flake = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
flakeChar : "❄",
minSize : 10,
maxSize : 20,
newOn : 500,
flakeColor : '#ffffff',
durationMillis: null
},
options = $.extend({}, defaults, options);
$flake.html(options.flakeChar);
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - defaults.maxSize - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 200,
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);
if (options.durationMillis) {
setTimeout(function() {
clearInterval(interval);
}, options.durationMillis);
}
};
})(jQuery);
调用方式:
$(function(){
$("body").snow({'durationMillis':2000}); //2s后停止生成雪花
})
参数解释:
* @params flakeChar - 实现雪花图案的html字符
* @params minSize - 雪花的最小尺寸
* @params maxSize - 雪花的最大尺寸
* @params newOn - 雪花出现的频率
* @params flakeColors - 雪花颜色
* @params durationMillis - 多少毫米后停止生成雪花
* @example $.fn.snow({ maxSize: 200, newOn: 1000 });
作者:风雨后见彩虹