(function($){
    $.fn.activiTag = function(opts) {
        opts = $.extend({
            move_step:2,    // 元素移動(dòng)步長(zhǎng)--px
            move_speed:40,    // 元素移動(dòng)速度--ms
            init_speed:1000,// 元素創(chuàng)建速度--ms
            min_opacity:0,    // 元素最低透明度--0-1小數(shù)
            max_grain: 10,    // 最大粒度
            // a標(biāo)簽數(shù)組
            a_List: ["<a href='#'>請(qǐng)?zhí)砑釉嘏?lt;/a>","<a href='#'>Spring Jpa詳解</a>","<a href='#'>javamail郵箱</a>"],    // a標(biāo)簽字符串?dāng)?shù)組
            // 背景顏色數(shù)組
            color_List: ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED']    // 標(biāo)簽顏色數(shù)組
        },opts||{});
       
        var aTag = $(this); // 當(dāng)前容器對(duì)象
        var T_width = aTag.width(), T_height = aTag.height(); // 容器高度、寬度
       
        return this.each(function(){
           
            function setATagCss() {    // 設(shè)置容器相應(yīng)css
                aTag.css({position:'relative',overflow:'hidden'});
            }
          
            function getRandomNum(Min, Max){ // 獲取兩個(gè)區(qū)間之內(nèi)隨機(jī)數(shù)
                Min = new Number(Min);Max = new Number(Max);
                var Range = Max - Min + 1;
                var Rand = Math.random();
                return Min + Math.floor(Rand * Range);
            }
           
            function getRandomXY(num) {    // 隨機(jī)返回一個(gè) 正/負(fù)參數(shù)
                num = new Number(num);   
                if(Math.random()<=0.5)
                num = -num;
                return num;
            }
           
            /**
             * 隨機(jī)創(chuàng)建a標(biāo)簽，寬度為容器寬度的三分之一，然后在自身基礎(chǔ)上+-五分之一寬度
             * 高度自身寬度的三分之一，然后+-三分之一
             */
            function createATag() {
                var i = getRandomNum(0,opts.a_List.length-1);
                var a = $(opts.a_List[i]);    // 每個(gè)標(biāo)簽元素
                aTag.append(a);
                return a;
            }
           
            /** 設(shè)置a標(biāo)簽css樣式 **/
            function setCss(a) {
                var w = Math.ceil(T_width/3) + getRandomXY(T_width/60);
                var h = Math.ceil(w/3) + getRandomXY(w/36); // 行高
                var zIndex = Math.ceil(Math.random()*400);    // 層數(shù)
                var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
                // 行高、層數(shù)、透明度
                a.css({
                    opacity:rdmOpcy,
                    zIndex: zIndex,
                    lineHeight:h+'px',
                    position: 'absolute',
                    textDecoration:'none',
                    textAlign:'center',
                    borderRadius: '3px',
                    color:'#FFFFFF',
                    whiteSpace: 'nowrap',
                });
                return a;
            }
           
            /** 計(jì)算標(biāo)簽相對(duì)于容器的初始化位置(X_Y 坐標(biāo)) **/
            function setXY(a) {
                var x = getRandomNum(0,(T_width-a.width()));
                var y = getRandomNum(0,T_height/10);
                a.css({left:x+'px', bottom:y+'px'});
                return a;
            }
           
            /** 設(shè)置隨機(jī)背景顏色 **/
            function setColor(a) {
                var i = Math.ceil(Math.random()*opts.color_List.length -1);
                a.css({backgroundColor:opts.color_List[i]})
            }
           
            /** 構(gòu)造函數(shù)入口 **/
            function construct() {
                var a = createATag();
                setCss(a);    // css
                setColor(a); // color
                setXY(a);    // 坐標(biāo)位置
                return a;
            }
           
            /** 動(dòng)畫(huà)定時(shí)器函數(shù) **/
            function interVal(a,s_opcy,botm,n,space,s) {
                var opcy = a.css('opacity');  // 透明度
                var botm_ = a.css('bottom').replace('px',''); // 實(shí)時(shí)底部距離
                var opcy_ = parseFloat(new Number(a.css('opacity'))) + s_opcy;  // ++透明度
                var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --透明度
                var fall = botm_ - botm;  // 已移動(dòng)的距離
                botm_ = new Number(botm_) + new Number(opts.move_step);
                a.css({
                    display: 'block',
                    bottom: botm_,
                });
               
                if(fall < n)
                { a.css({opacity: opcy_}) }
                else if(2*n < fall)
                { a.css({opacity: _opcy_}) }
                   
                if (botm_ >= space)
                {
                    clearInterval(s);
                    a.remove();
                }
            }
           
            function init() {
                if(aTag.children('a').length >= new Number(opts.max_grain))
                return;
                var a = construct();
                var opcy = a.css('opacity');  // 透明度
                var zInx = a.css('zIndex');      // 層數(shù)
                var botm = a.css('bottom').replace('px',''); // 初始到底部距離
                var space = T_height - a.height() - a.css('bottom').replace('px','');  // 要移動(dòng)的距離
               
                var n = space/3;    // 變換透明度距離
                var step = 1-opcy;    // 要變化透明度值
                var sec = n/opts.move_step*opts.move_speed/1000; // 距離/單步長(zhǎng) * 單步長(zhǎng)秒數(shù) = 需要秒數(shù)
                var s_opcy = opts.move_speed/1000/sec * step;  // 每次循環(huán)需要變換的透明度值
                var speed_ = getRandomNum(new Number(opts.move_speed)-30,new Number(opts.move_speed)+30);
                var currOpcy;    // 記錄鼠標(biāo)移入時(shí)透明度
//                console.log(opts.move_speed+'....'+speed_)
                /** 元素移動(dòng)循環(huán) **/
                var s = setInterval(function(){
                    interVal(a,s_opcy,botm,n,space,s);
                }, speed_)
               
                a.mouseover(function(){    // 鼠標(biāo)移入
                    currOpcy = a.css('opacity');
                    clearInterval(s);
                    $(this).css({
                        zIndex: 401,
                        opacity: 1
                    });
                });
               
                a.mouseout(function(){ // 鼠標(biāo)移出
                    $(this).css({
                        zIndex: zInx,
                        opacity: currOpcy
                    });
                    s= setInterval(function(){
                        interVal(a,s_opcy,botm,n,space,s);
                    },speed_);
                });
            }
            setATagCss();
            setInterval(init,opts.init_speed);
        });
    }
})(jQuery)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云動(dòng)態(tài)標(biāo)簽生成插件</title>
<script src="jquery.min.js"type="text/javascript" charset="utf-8"></script>
<script src="jquery-tag.js"/>"type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
    $('#tag').activiTag({});
});
</script>
<style>
    #tag{
        border:1px dashed gray;
        width:250px;
        height:250px;
        top: 50px;
        left: 300px;
    }
    a{
        padding:0px 3px;
        font-size:12px;
        white-space: nowrap;
        display:none;
    }
</style>
</head>
<body>
    <div id='tag'></div>
</body>
</html>