欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery编程开发中动态云标签插件解析

程序员文章站 2022-05-23 16:10:30
  最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jquery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法。高深的语法...

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

插件名:动态云标签

插件特点:

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

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

动画效果:

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

 jQuery编程开发中动态云标签插件解析

 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',
                    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]})
            }
           
            /** 构造函数入口 **/
            function construct() {
                var a = createatag();
                setcss(a);    // css
                setcolor(a); // color
                setxy(a);    // 坐标位置
                return a;
            }
           
            /** 动画定时器函数 **/
            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');      // 层数
                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; // 距离/单步长 * 单步长秒数 = 需要秒数
                var s_opcy = opts.move_speed/1000/sec * step;  // 每次循环需要变换的透明度值
                var speed_ = getrandomnum(new number(opts.move_speed)-30,new number(opts.move_speed)+30);
                var curropcy;    // 记录鼠标移入时透明度
//                console.log(opts.move_speed+'....'+speed_)
                /** 元素移动循环 **/
                var s = setinterval(function(){
                    interval(a,s_opcy,botm,n,space,s);
                }, speed_)
               
                a.mouver(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)

html:

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>云动态标签生成插件</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>
    <p id='tag'></p>
</body>
</html>