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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jquery的map与get方法详解
Nov 04 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python excel转换csv代码实例
2019/08/26 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
优秀教师主要事迹
2014/02/01 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
乳制品整治工作方案
2014/05/29 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
故宫导游词
2015/01/31 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js