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 相关文章推荐
了解jQuery技巧来提高你的代码
Jan 08 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
React组件的三种写法总结
Jan 12 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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遍历数组的方法汇总分析
2013/06/08 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
iOS10推送通知开发教程
2016/09/19 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
推荐dojo学习笔记
2007/03/24 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
Vue计算属性的使用
2017/08/04 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
世界上最好的帽子:Tilley
2016/11/27 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
《秋姑娘的信》教学反思
2014/02/28 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
市场营销专业求职信
2014/06/17 职场文书
书法社团活动总结
2015/05/07 职场文书
学校社团活动总结
2015/05/07 职场文书
不同意离婚代理词
2015/05/23 职场文书
初中家长意见
2015/06/03 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书