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 相关文章推荐
Underscore.js常用方法总结
Feb 28 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue实现树形菜单效果
Mar 19 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
漂亮实用的页面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
使用Apache的rewrite技术
2006/06/22 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python ORM编程基础示例
2020/02/02 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
网游商务专员求职信
2013/10/15 职场文书
《满井游记》教学反思
2014/02/26 职场文书
新学期开学标语
2014/06/30 职场文书
意向书范本
2014/07/29 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
讲解Python实例练习逆序输出字符串
2022/05/06 Python