jQuery多彩标签云代码 F5随机刷新

原创 新起点博客  2020-12-08 09:50 
【上云必备】上云仅?102/年

jQuery多彩标签云代码 F5随机刷新如图所示:jQuery多彩标签云代码 F5随机刷新如果大家觉得不够美观的话,可以自行修改CSS样式来修改。

 

HTML:

<div class="demo">
	<h2>jQuery 标签云 <span style="color:#3366cc;">F5刷新试试</span></h2>
	<div class="taglist" id="tags">
		<a target="_blank" href="https://www.henenseo.com/">zblog博客主题</a>
		<a target="_blank" href="https://www.henenseo.com/">zblog教程</a>
		<a target="_blank" href="https://www.henenseo.com/">添加404页面</a>
		<a target="_blank" href="https://www.henenseo.com/">网站优化</a>
		<a target="_blank" href="https://www.henenseo.com/">zblog入门</a>
		<a target="_blank" href="https://www.henenseo.com/">博客主题</a>
		<a target="_blank" href="https://www.henenseo.com/">资源分享</a>
		<a target="_blank" href="https://www.henenseo.com/">CMS主题</a>
		<a target="_blank" href="https://www.henenseo.com/">免费主题</a>
		<a target="_blank" href="https://www.henenseo.com/">加载动画</a>
		<a target="_blank" href="https://www.henenseo.com/">返回顶部</a>
		<a target="_blank" href="https://www.henenseo.com/">建站准备</a>
		<a target="_blank" href="https://www.henenseo.com/">注册域名</a>
		<a target="_blank" href="https://www.henenseo.com/">wordpress优化</a>
		<a target="_blank" href="https://www.henenseo.com/">挂载磁盘</a>
		<a target="_blank" href="https://www.henenseo.com/">本地php环境</a>
		<a target="_blank" href="https://www.henenseo.com/">新起点博客</a>	
	</div>
</div>

CSS样式:

*{margin:0;padding:0;list-style-type:none;}
a{margin:0;padding:0;background:transparent;color:#666;vertical-align:baseline;text-decoration:none;font-size:100%;font-family:"Open Sans","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Verdana,Tahoma,sans-serif;}
a:hover,a:focus{color:#FF6B57;text-decoration:none;cursor:pointer;}
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;}

JS:

$(document).ready(function(){
	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);
	});
	
});

 






文件名称:jQuery多彩标签云代码 F5随机刷新

更新日期:2020-12-08

文件大小:179 KB

提示:如有问题、侵权或者下载链接失效请联系站长!邮箱:xinqidianblog@163.com

点击下载

本文地址:https://www.henenseo.com/archives/4010
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情