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 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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源代码数组统计count分析
2011/08/02 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python中的id()函数指的什么
2017/10/17 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
如何用python免费看美剧
2020/08/11 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
司机的工作范围及职责
2013/11/13 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
归元寺导游词
2015/02/06 职场文书
文员岗位职责范本
2015/04/16 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Python之基础函数案例详解
2021/08/30 Python