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]); // 每个标签元素

　　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">

　　<head>

　　<title>云动态标签生成插件</title>

　　<script src="jquery-tag.js"/>"type="text/javascript" charset="utf-8"></script>

　　$(function(){

　　$('#tag').activiTag({});

　　});

　　</script>

　　<style>

　　#tag{

　　border:1px dashed gray;

　　width:250px;

　　height:250px;

　　top: 50px;

　　left: 300px;

　　}

　　padding:0px 3px;

　　font-size:12px;

　　white-space: nowrap;

　　display:none;

　　}

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

教程首页更多教程