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 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
基于datagrid框架的查询
Apr 08 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
js判断两个数组相等的5种方法
May 06 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php文件上传的简单实例
2013/10/19 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
prototype class详解
2006/09/07 Javascript
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
python获得图片base64编码示例
2014/01/16 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python中pygame安装方法图文详解
2015/11/11 Python
python如何生成网页验证码
2018/07/28 Python
业务经理的岗位职责
2013/11/16 职场文书
大学课外活动总结
2014/07/09 职场文书
测绘工程专业求职信
2014/07/15 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
小学班主任工作随笔
2015/08/15 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技