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客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
vue.js学习之递归组件
Dec 13 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
three.js 如何制作魔方
Jul 31 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
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
php文件包含的几种方式总结
2019/09/19 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
在Python中执行系统命令的方法示例详解
2017/09/14 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python isinstance函数用法详解
2020/02/13 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
python中的时区问题
2021/01/14 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
师范生自荐信范文
2013/10/06 职场文书
初一学生评语大全
2014/04/24 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
学习保证书100字
2015/02/26 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
运动会观后感
2015/06/09 职场文书
小学校长开学致辞
2015/07/29 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Java异常体系非正常停止和分类
2022/06/14 Java/Android