jQuery 动态云标签插件
内容摘要
前言:
最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法。高深
最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法。高深
文章正文
前言:
最近对js的插件封装特别感兴趣,无耐就目前的技术想做到js的完全封装,还是有一定困难,就基于jQuery封装了一个小的插件,而且是基于对象级开发的,不是添加全局方法。高深的语法几乎没有,就有一个return:foreach()方法来返回对象实例本身,还有一个extend()函数,用来扩展参数对象的属性,这也是为了对象在调完我这个方法后方便链式操作。
插件打包下载地址:点我下载
插件名:动态云标签
插件特点:
在指定块级元素内动态生成a标签
a标签的高度、宽度、位置、层数、背景颜色随机可控
a标签渐隐显示和渐隐消失,可改变初始化的透明度
a标签创建的速度和移动速度可控(计时器)
a标签移动的步长可控制(每次循环移动的距离)
鼠标悬浮停止动画且透明度最大,层数最高,鼠标离开,恢复之前状态
遇到问题:
目前插件是可以正常运行,但如果切换浏览器标签,不把插件页显示,过一会再切换回来,会有卡顿的现象,这个现在还不知道什么情况,请了解的给予指点,里面也有很多需要优化的地方,有好的点子希望提出来,我好及时给予更正。
动画效果:
汗:gif图片可能有点大,稍等会就动了。耐心哦
JS代码片段:
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>
<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>
代码注释