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学习笔记5 类和对象
Jan 11 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
详解angular笔记路由之angular-router
Sep 12 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
微信小程序实现签字功能
Dec 23 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue实现多页签组件
Jan 14 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
php SQL防注入代码集合
2008/04/25 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
java直接调用python脚本的例子
2014/02/16 Python
python自动裁剪图像代码分享
2017/11/25 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python迭代器常见用法实例分析
2019/11/22 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
详解Python IO口多路复用
2020/06/17 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
营销主管自我评价怎么写
2013/09/19 职场文书
机关门卫制度
2014/02/01 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
储备店长岗位职责
2015/04/14 职场文书
清洁工工作总结
2015/08/11 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Django项目如何正确配置日志(logging)
2021/04/29 Python