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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
用js实现随机返回数组的一个元素
Aug 13 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
javascript基础知识讲解
Jan 11 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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+mysql)
2007/11/23 PHP
php获取apk包信息的方法
2014/08/15 PHP
php限制文件下载速度的代码
2015/10/20 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python实现横向拼接图片
2020/03/23 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
检察官就职演讲稿
2014/01/13 职场文书
采购部部长岗位职责
2014/02/06 职场文书
读书活动总结
2014/04/28 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书