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中的Location地址对象
Jan 16 Javascript
javascript 常用方法总结
Jun 03 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
js实现车辆管理系统
Aug 26 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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 无限级缓存的类的扩展
2009/03/16 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
python操作mysql数据库
2017/03/05 Python
Django如何配置mysql数据库
2018/05/04 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python实现合并两个排序的链表
2019/03/03 Python
python使用递归的方式建立二叉树
2019/07/03 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
keras 多gpu并行运行案例
2020/06/10 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
求职简历的自我评价怎样写好
2013/10/07 职场文书
爱心捐书活动总结
2014/07/05 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python