jquery实现的随机多彩tag标签随机颜色和字号大小效果


Posted in Javascript onMarch 27, 2014

jquery随机多彩tag标签随机颜色和字号大小效果

js代码:

<script type="text/javascript" src="jquery-1.6.4.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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>

html代码:
<html> 
<head> 
<style> 
body,a{ font-size:13px;} 
a{ color:#333333; text-decoration:none;} 
.taglist{ width:250px;overflow:hidden;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 a:hover{ color:#F00; text-decoration:underline;} 
.w95{ width:95%; margin:0 auto; padding-top:6px; padding-bottom:6px;} 
.taglist .w95{} 
</style> 
</head> 
<body> 
<div class="taglist"> 
<div class="tit"><a href="#">TAG标签</a></div> 
<div class="w95" id="tags"> 
<a href='http://www.51xuediannao.com/js/nav/'>导航菜单</a> 
<a href='http://www.51xuediannao.com/js/slide/'>焦点幻灯片</a> 
<a href='http://www.51xuediannao.com/js/gg/'>广告代码</a> 
<a href='http://www.51xuediannao.com/js/texiao/'>网页特效</a> 
<a href='http://www.51xuediannao.com/js/'>jquery 特效</a> 
<a href='http://www.51xuediannao.com/js/gundong/'>滚动代码</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81/">查看源码</a> 
<a href="http://www.51xuediannao.com/tags.php?/IE7%E5%8F%98%E6%85%A2/">IE7变慢</a> 
<a href="http://www.51xuediannao.com/tags.php?/ET2.0%E9%87%87%E9%9B%86/">ET2.0采集</a> 
<a href="http://www.51xuediannao.com/tags.php?/CSS/">CSS</a> 
<a href="http://www.51xuediannao.com/tags.php?/moss2007/">moss2007</a> 
<a href="http://www.51xuediannao.com/tags.php?/MOSS%E6%AF%8D%E7%89%88%E9%A1%B5/">MOSS母版页</a> 
<a href="http://www.51xuediannao.com/tags.php?/JS%2BCSS%E5%B9%BB%E7%81%AF%E7%89%87/">JS+CSS幻灯片</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E7%BD%91%E9%A1%B5%E6%BA%90%E7%A0%81/">网页源码</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E7%BD%91%E9%A1%B5%E9%85%8D%E8%89%B2/">网页配色</a> 
<a href="http://www.51xuediannao.com/tags.php?/301%E9%87%8D%E5%AE%9A%E5%90%91/">301重定向</a> 
<a href="http://www.51xuediannao.com/tags.php?/JS%2BCSS%E5%88%97%E8%A1%A8/">JS+CSS列表</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E9%9A%8F%E6%9C%BA%E6%95%B0/">随机数</a> 
<a href="http://www.51xuediannao.com/tags.php?/%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95/">下拉菜单</a> 
</div> 
</div> 
</body> 
</html>

效果显示:
jquery实现的随机多彩tag标签随机颜色和字号大小效果 
Javascript 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
element跨分页操作选择详解
Jun 29 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
小程序自定义圆形进度条
Nov 17 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 #Javascript
js无刷新操作table的行和列
Mar 27 #Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 #Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 #Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 #Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 #Javascript
JS中判断null、undefined与NaN的方法
Mar 26 #Javascript
You might like
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
python 如何停止一个死循环的线程
2020/11/24 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
用python制作个视频下载器
2021/02/01 Python
Python datetime模块的使用示例
2021/02/02 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书