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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
python 从远程服务器下载日志文件的程序
2013/02/10 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python实现烟花小程序
2019/01/30 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
敬老文明号事迹材料
2014/01/16 职场文书
上课睡觉检讨书
2014/01/28 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
安全横幅标语
2014/06/09 职场文书
2014年教务处工作总结
2014/12/03 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书