jquery实现刷新随机变化样式特效(tag标签样式)


Posted in Javascript onFebruary 03, 2017

tag标签随机多彩变化的超链接样式,使用JQ+DIV+CSS实现刷新随机变化样式特效。jquery版的随机多彩tag标签随机css字体颜色和字号大小效果。于是就写下这个效果与大家分享,办法也很笨拙,就是利用jquery随机数来遍历#tag中所有的a链接为其添加一个随机的类名。然后预先定义了12个链接样式。你可以自定义类似 #tags .tags1 这样的css以实现你需要的字体样式。这里的jquery随机多彩tag标签随机颜色和字号大小效果样式只是演示随便写的,不够漂亮。

jquery实现刷新随机变化样式特效(tag标签样式)

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 </head>
 <body>
 <style>
 body{ text-align:center}
 body,a{ font-size:13px;}
 a{ color:#333333; text-decoration:none;}
 .taglist{ width:350px;overflow:hidden; text-align:left; margin:0 auto;border:#dddddd solid 1px;}
 .taglist .tit{ width:100%; height:24px; line-height:24px; background-color:#565662;}
 .taglist .tit a{ padding-left:8px; color:#ffffff;}
 #tags a{height:26px; line-height:26px;padding-right:6px;}
 #tags .tags0{}
 #tags .tags1{color:#C00; font-size:24px;}
 #tags .tags2{color:#030; font-size:16px;}
 #tags .tags3{color:#00F;}
 #tags .tags4{ font-size:16px;}
 #tags .tags5{color:#C00; font-size:20px;}
 #tags .tags6{color:#F06 font-size:20px;}
 #tags .tags7{color:#030; font-weight:bold; font-size:18px;}
 #tags .tags8{color:#F06; font-weight:bold;}
 #tags .tags9{color:#C00; font-weight:bold;font-size:16px;}
 #tags .tags10{color:#090; font-weight:bold;font-size:18px;}
 #tags .tags11{color:#09F;}
 #tags .tags12{color:#F90;font-size:14px;}
 #tags a:hover{ color:#F00; text-decoration:underline;}
 .w95{ width:95%; margin:0 auto; padding-top:6px; padding-bottom:6px;}
 .taglist .w95{}
 </style>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 var tags_a = $("#tags a");
 tags_a.each(function(){
 var x = 9;
 var y = 0;
 var rand = parseInt(Math.random() * (x - y + 1) + y);
 $(this).addClass("tags"+rand);
 });
 })
 </script>
 <div class="taglist"> 
 <div class="tit"><a href="#">TAG标签</a></div> 
 <div class="w95" id="tags"> 
 <a href="http://www.baidu.com">导航菜单</a> 
 <a href="http://www.baidu.com">焦点幻灯片</a> 
 <a href="http://www.baidu.com">条幅广告代码</a> 
 <a href="http://www.baidu.com">经典下拉菜单</a> 
 <a href="http://www.baidu.com">jquery 特效</a> 
 <a href="http://www.baidu.com">滚动代码</a> 
 <a href="http://www.baidu.com">查看源码</a> 
 <a href="http://www.baidu.com">css hack</a> 
 <a href="http://www.baidu.com">file样式美化</a> 
 <a href="http://www.baidu.com">CSS</a> 
 <a href="http://www.baidu.com">HTML</a> 
 <a href="http://www.baidu.com">DIVCSS5</a> 
 <a href="http://www.baidu.com">JS+CSS幻灯片</a> 
 <a href="http://www.baidu.com">网页源码</a> 
 <a href="http://www.baidu.com">多彩导航条</a> 
 <a href="http://www.baidu.com">css div</a> 
 <a href="http://www.baidu.com">JS表格隔行变色</a> 
 <a href="http://www.baidu.com">css+div</a> 
 <a href="http://www.baidu.com">下拉菜单</a>
 </div>
 </div>
 </body>
</html>

本特效可用于tag标签随机多彩变化的超链接样式。使用非常简单,可以预设多个想要的CSS a样式,可以设置超链接文字大小、字体颜色、字体背景等不同样式,随机刷新网页时候JQ自动实现超链接文字多样css样式特效效果。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 相关控件的事件操作分解
Aug 03 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
AngularJS实现路由实例
Feb 12 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 #Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 #Javascript
JavaScript数组复制详解
Feb 02 #Javascript
常用jQuery选择器汇总
Feb 02 #Javascript
JavaScript优化以及前段开发小技巧
Feb 02 #Javascript
JavaScript字符集编码与解码详谈
Feb 02 #Javascript
JS实现购物车特效
Feb 02 #Javascript
You might like
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
浅谈Javascript 执行顺序
2013/12/18 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python中函数参数调用方式分析
2018/08/09 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python 支付整合开发包的实现
2019/01/23 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
wxpython绘制圆角窗体
2019/11/18 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
房屋公证委托书
2014/04/03 职场文书
考试作弊检讨书
2015/01/27 职场文书
优秀党员个人总结
2015/02/14 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书