利用jquery实现标签云无规则样式



47 186 63



特效描述:利用jquery实现标签云无规则样式,利用jquery实现标签云无规则样式

代码结构

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>

3. HTML代码

<div class="headeline"></div>
<script type="text/javascript">
$(document).ready(function(){
	/*多彩tag*/
	var tags_a = $("#tags").find("a");
	tags_a.each(function(){
		var x = 9;
		var y = 0;
		var rand = parseInt(Math.random() * (x - y + 1) + y);
		$(this).addClass("size"+rand);
	});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif ,"宋体";}
.demo{background:#FFF8DE;border:solid 1px #ff6600;width:380px;margin:20px auto;}
.demo h2{font-size:18px;height:32px;padding:10px 0 0 20px;font-family:"微软雅黑","宋体";border-bottom:solid 1px #ff6600;}
.taglist{padding:20px 20px 30px 20px;}
.taglist a{padding:3px;display:inline-block;white-space:nowrap;}
a.size1{font-size:25px;padding:10px;color:#804D40;}
a.size1:hover{color:#E13728;}
a.size2{padding:7px;font-size:20px;color:#B9251A;}
a.size2:hover{color:#E13728;}
a.size3{padding:5px;font-size:35px;color:#C4876A;}
a.size3:hover{color:#E13728;}
a.size4{padding:5px;font-size:15px;color:#B46A47;}
a.size4:hover{color:#E13728;}
a.size5{padding:5px;font-size:25px;color:#E13728;}
a.size5:hover{color:#B46A47;}
a.size6{padding:0px;font-size:12px;color:#77625E}
a.size6:hover{color:#E13728;}
</style>
<div class="demo">
	<h2>jQuery 标签云 <span style="color:#3366cc;">F5刷新试试</span></h2>
	<div class="taglist" id="tags">
		<a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%B2%CB%B5%A5&classID=835">菜单</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%CE%DE%B7%EC%B9%F6%B6%AF&classID=835">无缝滚动</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%BD%B9%B5%E3%CD%BC&classID=835">焦点图</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%C9%CF%CF%C2%B9%F6%B6%AF&classID=835">上下滚动</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%D7%F3%D3%D2%B9%F6%B6%AF&classID=835">左右滚动</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%B9%F6%B6%AF%CC%F5&classID=835">滚动条</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%CE%C4%D7%D6+%B9%F6%B6%AF&classID=835">文字 滚动</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%CD%BC%C6%AC%B9%F6%B6%AF&classID=835">图片滚动</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%B5%AF%B3%F6%B2%E3&classID=835">弹出层</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%B8%A1%B6%AF%B2%E3&classID=835">浮动层</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=html5&classID=835">html5</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=div+%B2%BC%BE%D6&classID=835">div 布局</a><a target="_blank" href="http://51qianduan.com/donghua/">flash动画</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%B1%ED%B5%A5+%CC%E1%BD%BB&classID=835">表单 提交</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%D1%A1%CF%EE%BF%A8&classID=835">选项卡</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%B6%FE%BC%B6%B5%BC%BA%BD&classID=835">二级导航</a><a target="_blank" href="http://www.51qianduan.com//search.aspx?keyword=%B1%ED%B8%F1&classID=835">表格</a>	
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 文字标签 彩色文字 文字闪烁 打字机 文字列表 文字弹幕 文字高亮 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 图片文字 文字导航菜单 文字

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到