效果图：一个好看的标签云js代码，风格类似于windows系统的metro界面样式，看起来挺不错的，蓝叶就花了点时间找到了代码，动动手修改下就可以放你的网站上使用，复制下方代码到新建html文件里，在浏览器打开就能看到如图一样的效果。代码：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>标签云效果</title>
<style>
*{margin:0;padding:0;border:0;}
.wordbox{position:relative;}
.box{position: absolute;text-align: center;word-wrap: break-word;overflow: hidden;border: 1px solid rgb(255 255 255 / 0.6);transition-duration: .6s,.6s;transition-property: background-color,color;transition-timing-function: ease,ease;}
.box:hover{ opacity:0.6}
.box a {color: #fff;text-decoration: none;display: inline-block;width: 100%;height:100%;}
</style>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wordbox@1.3.1/dist/wordbox.min.js"></script>
</head>
<body>
<div id="wordbox"></div>
<script type="text/javascript">
var titles = ['JavaScript', 'CSS', 'HTML', 'HTML5', 'SVG', 'PHP', 'Python', 'Shell', 'WebGL'];
var words = ['JavaScript', 'CSS', 'HTML', 'HTML5', 'SVG', 'PHP', 'Python', 'Shell', 'WebGL'];
for(var i = 0; i < titles.length; i++) {
words[i] = {
"title" : titles[i],
"url" : words[i]
}
}
var colors = ['#cc5b34', '#ff9800','#00aff0','#09c','#8bc34a','#136486'];
$("#wordbox").wordbox({
isLead: false,
leadWord: {'title': '全部', 'url': ''},
words: words,
colors: colors,
isFixedWidth: true,
width: window.innerWidth - 2,
height: 160
});
</script>
</body>
</html>
评论
72条评论pick杨超越 Lv.1
Chrome 86.0.4240.198 
Windows 回复
浙江省 移动
撒旦2阿达达 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主表情，好人一生平安
四川省南充市 电信
撒旦法的撒 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主表情，好人一生平安
美国 华盛顿Cogent通信公司
www.maitanbang.com Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主
，好人一生平安
湖北省宜昌市 联通
sdfsdfsd Lv.1
Chrome 101.0.0.0 
Windows 回复
江西省上饶市 电信
¶电风扇 Lv.1
Chrome 86.0.4240.198 
Windows 7 x64 Edition 回复
看起来好像不错的样子
天津市河西区 联通
v分 Lv.1
Chrome 78.0.3904.108 
Windows 回复
新人报道
学习一下
山西省忻州市 电信
叫我老妖精111 Lv.1
Internet Explorer 
iPhone iOS 15.6 回复
215号5343446463416和宿舍
北京市 新国信通信有限公司
1111 Lv.1
Chrome 86.0.4240.198 
Windows 回复
5452463 见咯
贵州省铜仁地区 移动
宁静志远 Lv.1
Chrome 96.0.4664.110 
Windows 回复
找到了
江苏省南京市 移动