首页 > 代码库 > jQuery 动态标签生成插件
jQuery 动态标签生成插件
前言：
最近对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=http://www.mamicode.com/‘#‘>请添加元素哦","<a href=http://www.mamicode.com/‘#‘>Spring Jpa详解","<a href=http://www.mamicode.com/‘#‘>javamail邮箱"], // 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]); // 每个标签元素 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.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>
打包下载地址：点我下载
如有好的建议请哆哆指正，多谢多谢。
ps:欢迎转载，转载请注明出处：http://www.cnblogs.com/liuyitian/p/4086476.html
写作不易，难免有疏漏和错误，还请慷慨指正，不错请推荐
每天多学一点点 代码少敲一点点
jQuery 动态标签生成插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。