jQuery 动态云标签插件


Posted in Javascript onNovember 11, 2014

前言:

最近对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">

<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>
Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
javascript 回调函数详解
Nov 11 #Javascript
JSON格式化输出
Nov 10 #Javascript
再谈javascript原型继承
Nov 10 #Javascript
让angularjs支持浏览器自动填表
Nov 10 #Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 #Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 #Javascript
浅谈JavaScript 框架分类
Nov 10 #Javascript
You might like
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
js实现查询商品案例
2020/07/22 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
关于python2 csv写入空白行的问题
2018/06/22 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python requests证书问题解决
2019/09/05 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
如何利用python进行时间序列分析
2020/08/04 Python
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
个人收入证明模板
2014/09/18 职场文书
三严三实心得体会范文
2014/10/13 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2014年客服工作总结范文
2014/11/13 职场文书