频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
jQuery编程开发中动态云标签插件解析
2018-01-13 09:48:27           
收藏   我要投稿

  最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法。高深的语法几乎没有,就有一个return:foreach()方法来返回对象实例本身,还有一个extend()函数,用来扩展参数对象的属性,这也是为了对象在调完我这个方法后方便链式操作。

插件名:动态云标签

插件特点:

在指定块级元素内动态生成a标签
a标签的高度、宽度、位置、层数、背景颜色随机可控
a标签渐隐显示和渐隐消失,可改变初始化的透明度
a标签创建的速度和移动速度可控(计时器)
a标签移动的步长可控制(每次循环移动的距离)
鼠标悬浮停止动画且透明度最大,层数最高,鼠标离开,恢复之前状态
遇到问题:

  目前插件是可以正常运行,但如果切换浏览器标签,不把插件页显示,过一会再切换回来,会有卡顿的现象,这个现在还不知道什么情况,请了解的给予指点,里面也有很多需要优化的地方,有好的点子希望提出来,我好及时给予更正。

动画效果:

汗:gif图片可能有点大,稍等会就动了。耐心哦

 \

 JS代码片段:

代码如下:


(function($){
    $.fn.activiTag = function(opts) {
        opts = $.extend({
            move_step:2,    // 元素移动步长--px
            move_speed:40,    // 元素移动速度--ms
            init_speed:1000,// 元素创建速度--ms
            min_opacity:0,    // 元素最低透明度--0-1小数
            max_grain: 10,    // 最大粒度
            // a标签数组
            a_List: ["<a href='#'>请添加元素哦</a>","<a href='#'>Spring Jpa详解</a>","<a href='#'>javamail邮箱</a>"],    // a标签字符串数组
            // 背景颜色数组
            color_List: ['#CD2626','#8b4513','#696969','#ff8c00','#6495ED']    // 标签颜色数组
        },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){ // 获取两个区间之内随机数
                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) {    // 随机返回一个 正/负参数
                num = new Number(num);   
                if(Math.random()<=0.5)
                num = -num;
                return num;
            }
           
            /**
             * 随机创建a标签,宽度为容器宽度的三分之一,然后在自身基础上+-五分之一宽度
             * 高度自身宽度的三分之一,然后+-三分之一
             */
            function createATag() {
                var i = getRandomNum(0,opts.a_List.length-1);
                var a = $(opts.a_List[i]); &nbnbsp;  // 每个标签元素
                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);    // 层数
                var rdmOpcy = getRandomNum(new Number(opts.min_opacity),0);
                // 行高、层数、透明度
                a.css({
                    opacity:rdmOpcy,
                    zIndex: zIndex,
                    lineHeight:h+'px',
                    position: 'absolute