一、前言
前言：最近圣诞节来临，需要在页面上应用一个雪花飘落的效果，做之前产品经理给了我网络上的一个demo，地址是
http://demo.lanrenzhijia.com/demo/1225/sd/，预览了一下，效果不错，但是性能可以再优化，源码中使用setInterval重复定时器，
dom在不停地插入移除，这里主要优化这两个地方，使用setTimeout替换setInterval，减少页面dom的重排，其他地方可以自己调整。
二、应用实例demo
/**
* component: jQuery.snowflake 2013/12/19 华子yjh
* invoking: jQuery.snowflake(options)
*
// 配置对象
options = {
length: 26, // 数量
interval: 1000, // 雪花之间出现的时间间隔
duration: 24000 // 雪花的动画时间
}
*
*/
demo地址1：http://miiee.taobao.com/activity/shengdan.htm
demo地址2：http://miiee.taobao.com/
三、设计思路
第一步：
用HTML实体代表雪花外形，雪花出现的位置，大小都是随机的
第二步：
保持相邻雪花之间出现的时间间隔(或者它们之间的距离)永远一致; 就必须使用重复定时器，使用双setTimeout，而非setInterval，这一步很重要
setTimeout(function call() {
// do something
setTimeout(call, interval);
},0);
// 使用双setTimeout模拟重复定时器对于对于自动轮播等其他应用非常有用，
// 推荐阅读javascript高级程序设计一书有关setInterval的缺点及解决办法
四、组件源码
最初代码：
$.extend({
// 雪花飘落组件
snowflake: function(options) {
var flakeHtmlStr = '',
config = {
length: 26, // 数量
interval: 1000, // 雪花之间出现的时间间隔
duration: 24000 // 雪花的动画时间
};
$.extend(config, options || {});
var len = config.length,
$win = $(window),
win_width = $win.width(),
win_height = $win.height(),
timeoutId = null,
$items,
i,
initStyle = {
position: 'absolute',
top: '-50px',
zIndex: 9999,
opacity: 1,
fontSize: 0,
color: '#FFF'
},
endStyle = {
top: win_height + 50 + 'px',
opacity: 0
};
// 插入DOM，并初始化其样式
for (i = 0; i < len; i++) {
flakeHtmlStr += '<div class="snow-flake">❄</div>';
}
$(flakeHtmlStr).appendTo('body');
$items = $('.snow-flake').css(initStyle).wrapAll('<div id="snowflake-box"></div>');
// 处理单个雪花
function handleItem(idx) {
var $itm = $items.eq(idx).css(initStyle),
w, val;
$itm.css({
fontSize: 20 + Math.ceil(Math.random() * 30, 10) + 'px'
});
w = $itm.width();
val = Math.floor(Math.random() * win_width);
if ((val + w) >= win_width) {
val = val - w;
}
$itm.css({
left: val + 'px'
})
.animate(endStyle, config.duration);
}
// 开始运行
function running() {
var i = 0;
setTimeout(function call() {
handleItem(i);
if (i < len-1) {
i++;
}
else {
i = 0;
}
setTimeout(call, config.interval);
}, 0);
}
running();
}
});
$.snowflake(); // 调用
更新优化后的代码：
$.extend({
// 雪花飘落组件
snowflake: function(options) {
var $items, len,
win_height = $(window).height(),
maxVal = $(window).width() - 24, // 防止浏览器出现横向滚动条，24px为font-size: 35px;时的宽度
options = $.extend({
length: 21, // 数量
interval: 1200, // 雪花之间出现的时间间隔
duration: 24000 // 雪花的动画时间
}, options || {});
len = options.length;
// 初始化dom
(function(){
var flakeHtmlStr = '', i;
// 插入DOM，并初始化其样式
for (i = 0; i < len; i++) {
flakeHtmlStr += '<div class="snow-flake">❄</div>';
}
$(flakeHtmlStr).appendTo('body');
$items = $('.snow-flake').css({
position: 'absolute',
top: '-40px',
color: '#FFF',
zIndex: 999
}).wrapAll('<div id="snowflake-box"></div>');
}());
// 处理单个雪花
function handleItem(idx) {
$items.eq(idx)
.css({
top: '-40px',
opacity: 1,
left: Math.random() * maxVal + 'px',
fontSize: [25, 30, 35][(Math.random() * 3).toString().charAt(0)] + 'px'
})
.animate({
top: win_height + 'px',
opacity: 0
}, options.duration);
}
// 开始运行
function running() {
var i = 0;
setTimeout(function call() {
handleItem(i);
if (i < len-1) {
i++;
}
else {
i = 0;
}
setTimeout(call, options.interval);
}, 0);
}
running();
}
});
$.snowflake(); // 调用
转载请注明出处：博客园华子yjh