jQuery 动态标签生成插件

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

插件名：动态云标签插件特点：

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

遇到问题： 目前插件是可以正常运行，但如果切换浏览器标签，不把插件页显示，过一会再切换回来，会有卡顿的现象，这个现在还不知道什么情况，请了解的给予指点，里面也有很多需要优化的地方，有好的点子希望提出来，我好及时给予更正。动画效果：汗：gif图片可能有点大，稍等会就动了。耐心哦

JS代码片段：（function（$）{$.fn.activiTag = function（opts） {opts = $.extend（{move_step:2,// 元素移动步长--pxmove_speed:40,// 元素移动速度--msinit_speed:1000,// 元素创建速度--msmin_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（） {// 设置容器相应cssaTag.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]）;// 每个标签元素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）;// csssetColor（a）; // colorsetXY（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.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） 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><div id="tag"></div></body></html>

jQuery 动态标签生成插件下载： ------------------------------------------分割线------------------------------------------ 免费下载地址在 http://linux.linuxidc.com/ 用户名与密码都是www.linuxidc.com 具体下载目录在 /2015年资料/7月/10日/jQuery 动态标签生成插件/ 下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm ------------------------------------------分割线------------------------------------------ 如有好的建议请哆哆指正，多谢多谢。本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-07/119707.htm