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 相关文章推荐
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
JS中字符串trim()使用示例
May 26 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
javascript常用经典算法详解
Jan 11 Javascript
拖动时防止选中
Feb 03 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
JS深入学习之数组对象排序操作示例
May 01 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 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二维数组合并及去重复的方法
2015/03/04 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
简单实现python进度条脚本
2017/12/18 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
学校门卫岗位职责
2014/03/16 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
签约仪式策划方案
2014/06/02 职场文书
要账委托书范本
2014/09/15 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书