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高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 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实现的美国50个州选择列表实例
2015/04/20 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python实现高效求解素数代码实例
2015/06/30 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
OpenCV 模板匹配
2019/07/10 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
新教师工作感言
2014/02/16 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
小学毕业演讲稿
2014/04/25 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
焦裕禄观后感
2015/06/03 职场文书
高中运动会前导词
2015/07/20 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis