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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
Vue页面骨架屏注入方法
May 13 Javascript
javascript实现倒计时关闭广告
Feb 09 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
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP实现合并discuz用户
2015/08/05 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
javascript操作数组详解
2014/12/17 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
python中ConfigParse模块的用法
2014/09/29 Python
python通过zabbix api获取主机
2018/09/17 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Django接收自定义http header过程详解
2019/08/23 Python
Django异步任务线程池实现原理
2019/12/17 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
法律系毕业生求职信
2014/05/28 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
理想国读书笔记
2015/06/25 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python