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 animate 动画效果使用说明
Nov 04 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 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 minixml详解
2008/07/19 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
谈谈关于JavaScript 中的 MVC 模式
2013/04/11 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
python求素数示例分享
2014/02/16 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
酒店管理失职检讨书
2014/09/16 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
《观察物体》教学反思
2016/02/17 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL