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">&#10052;</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">&#10052;</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