jQuery 动态云标签插件
更新时间：2014年11月11日 14:17:28 投稿：hebedich
这里推荐给大家一款jquery动态云标签的插件，非常的炫，在指定块级元素内动态生成a标签，a标签的高度、宽度、位置、层数、背景颜色随机可控，a标签渐隐显示和渐隐消失，可改变初始化的透明度，鼠标悬浮停止动画且透明度最大，层数最高，鼠标离开，恢复之前状态
前言：
最近对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]); // 每个标签元素
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>
相关文章
这篇文章主要介绍了jquery可定制的在线UEditor编辑器，UEditor的功能非常强大，ueditor更具有功能插件接口，很轻松地添加自己定义功能到编辑器中，方便项目的不同需求，需要的朋友可以参考下2015-11-11
可以显示单图片，多图片ajax请求的ThickBox3.1类下载
ThickBox是一个基于JQuery类库的扩展 以下的是ThickBox3.1的实例+代码调用方法2007-12-12
这篇文章主要为大家详细介绍了jquery实现百分比记分进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了jQuery过滤选择器用法,包括可见性过滤:hidden、:visible,包含过滤:contains等各种常用的过滤选择器,需要的朋友可以参考下2016-09-09
jQuery3.0中的buildFragment私有函数详解
在 jQuery3.0中，buildFragment 是一个私有函数，用来构建一个包含子节点 fragment 对象。下文给大家介绍jQuery3.0中的buildFragment私有函数详解，对jquery3.0 buildfragment相关知识感兴趣的朋友一起学习吧2016-08-08
JQuery的事件处理机制在JQuery框架中起着重要的左右，它就像电视机的开关，我们打开电视机的开关才能看到各个电视台精彩的节目，那么我们使用JQuery的事件处理机制就可以创造我们自定义的行为，比如说提交、改变样式、效果显示等等，使我们的网页更加丰富。2010-11-11
本篇文章主要是对jquery ajax传递中文参数乱码问题及解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
老生常谈jquery中detach()和remove()的区别
下面小编就为大家带来一篇老生常谈jquery中detach()和remove()的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了jquery中为什么能用$操作，jquery直接用$来获取dom节点的方式也非常便捷方便，那么他是怎么实现的呢？,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了jQuery查找节点方法,结合完整实例形式分析了jQuery针对DOM节点属性的相关操作技巧,需要的朋友可以参考下2016-09-09
最新评论