效果图：一个好看的标签云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>
评论
10条评论qqdns Lv.2
Chrome 95.0.4638.69 
Windows 7 回复
感谢楼主
，好人一生平安
湖北省仙桃市 电信
WLL. Lv.1
Chrome 86.0.4240.198 
Windows 回复
测试一波~
河南省郑州市 电信
1633627246 Lv.1
Chrome 86.0.4240.198 
Windows 回复
111
浙江省杭州市 电信
哥特式 Lv.1 回复
bbb斤斤计较就好白白嫩嫩那那那
上海市 电信
2255 Lv.1 回复
啾啾啾啾啾啾
上海市 电信
lssun Lv.5 回复
这个可以
广东省东莞市 联通
1111111 Lv.1
Chrome 96.0.4664.45 
Windows 回复
工业与于故意
广西柳州市高新区 视虎科技有限公司
狗哥GaeHyung Lv.1
Chrome 69.0.3947.100 
Windows 回复
谢谢
四川省成都市 电信
夨落旳尐孩 Lv.1
Firefox 88.0 
Windows 回复
感谢分享
江苏省泰州市 电信
ppt课件 Lv.1
Firefox 85.0 
Windows 7 x64 Edition 回复
非常不错！关注一下
北京市 移动