jQuery 動態(tài)云標簽插件

更新時間：2014年11月11日 14:17:28 投稿：hebedich

這里推薦給大家一款jquery動態(tài)云標簽的插件，非常的炫，在指定塊級元素內(nèi)動態(tài)生成a標簽，a標簽的高度、寬度、位置、層數(shù)、背景顏色隨機可控，a標簽漸隱顯示和漸隱消失，可改變初始化的透明度，鼠標懸浮停止動畫且透明度最大，層數(shù)最高，鼠標離開，恢復之前狀態(tài)

前言：

　　最近對js的插件封裝特別感興趣，無耐就目前的技術(shù)想做到js的完全封裝，還是有一定困難，就基于jQuery封裝了一個小的插件，而且是基于對象級開發(fā)的，不是添加全局方法。高深的語法幾乎沒有，就有一個return：foreach()方法來返回對象實例本身，還有一個extend（）函數(shù)，用來擴展參數(shù)對象的屬性，這也是為了對象在調(diào)完我這個方法后方便鏈式操作。

　　插件打包下載地址：點我下載

插件名：動態(tài)云標簽

插件特點：

在指定塊級元素內(nèi)動態(tài)生成a標簽
a標簽的高度、寬度、位置、層數(shù)、背景顏色隨機可控
a標簽漸隱顯示和漸隱消失，可改變初始化的透明度
a標簽創(chuàng)建的速度和移動速度可控（計時器）
a標簽移動的步長可控制（每次循環(huán)移動的距離）
鼠標懸浮停止動畫且透明度最大，層數(shù)最高，鼠標離開，恢復之前狀態(tài)
遇到問題：

　　目前插件是可以正常運行，但如果切換瀏覽器標簽，不把插件頁顯示，過一會再切換回來，會有卡頓的現(xiàn)象，這個現(xiàn)在還不知道什么情況，請了解的給予指點，里面也有很多需要優(yōu)化的地方，有好的點子希望提出來，我好及時給予更正。

動畫效果：

汗：gif圖片可能有點大，稍等會就動了。耐心哦

JS代碼片段：

復制代碼代碼如下:

(function($){

    $.fn.activiTag = function(opts) {

        opts = $.extend({

            move_step:2,    // 元素移動步長--px

            move_speed:40,    // 元素移動速度--ms

            init_speed:1000,// 元素創(chuàng)建速度--ms

            min_opacity:0,    // 元素最低透明度--0-1小數(shù)

            max_grain: 10,    // 最大粒度

            // a標簽數(shù)組

            a_List: ["<a href='#'>請?zhí)砑釉嘏?lt;/a>","<a href='#'>Spring Jpa詳解</a>","<a href='#'>javamail郵箱</a>"],    // a標簽字符串數(shù)組

            // 背景顏色數(shù)組

            color_List: ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED']    // 標簽顏色數(shù)組

        },opts||{});

        var aTag = $(this); // 當前容器對象

        var T_width = aTag.width(), T_height = aTag.height(); // 容器高度、寬度

        return this.each(function(){

            function setATagCss() {    // 設置容器相應css

                aTag.css({position:'relative',overflow:'hidden'});

            }

            function getRandomNum(Min, Max){ // 獲取兩個區(qū)間之內(nèi)隨機數(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) {    // 隨機返回一個 正/負參數(shù)

                num = new Number(num);    

                if(Math.random()<=0.5) 

                num = -num;

                return num; 

            }

            /**

             * 隨機創(chuàng)建a標簽，寬度為容器寬度的三分之一，然后在自身基礎(chǔ)上+-五分之一寬度

             * 高度自身寬度的三分之一，然后+-三分之一

             */

            function createATag() {

                var i = getRandomNum(0,opts.a_List.length-1);

                var a = $(opts.a_List[i]);    // 每個標簽元素

                aTag.append(a);

                return a;

            }

            /** 設置a標簽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;

            }

            /** 計算標簽相對于容器的初始化位置(X_Y 坐標) **/

            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;

            }

            /** 設置隨機背景顏色 **/

            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);    // 坐標位置

                return a;

            }

            /** 動畫定時器函數(shù) **/

            function interVal(a,s_opcy,botm,n,space,s) {

                var opcy = a.css('opacity');  // 透明度

                var botm_ = a.css('bottom').replace('px',''); // 實時底部距離

                var opcy_ = parseFloat(new Number(a.css('opacity'))) + s_opcy;  // ++透明度

                var _opcy_ = parseFloat(new Number(a.css('opacity'))) - s_opcy; // --透明度

                var fall = botm_ - botm;  // 已移動的距離

                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','');  // 要移動的距離

                var n = space/3;    // 變換透明度距離

                var step = 1-opcy;    // 要變化透明度值

                var sec = n/opts.move_step*opts.move_speed/1000; // 距離/單步長 * 單步長秒數(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;    // 記錄鼠標移入時透明度

//                console.log(opts.move_speed+'....'+speed_)

                /** 元素移動循環(huán) **/

                var s = setInterval(function(){

                    interVal(a,s_opcy,botm,n,space,s);

                }, speed_)

                a.mouseover(function(){    // 鼠標移入

                    currOpcy = a.css('opacity');

                    clearInterval(s);

                    $(this).css({

                        zIndex: 401,

                        opacity: 1

                    });

                });

                a.mouseout(function(){ // 鼠標移出

                    $(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)