jQuery.snowflake雪花飘落插件

一、前言

前言：最近圣诞节来临，需要在页面上应用一个雪花飘落的效果，做之前产品经理给了我网络上的一个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(); // 调用

View Code

更新优化后的代码：

$.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

转载于:https://www.cnblogs.com/yangjunhua/p/3481899.html