效果图：一个好看的标签云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>
评论
144条评论白衣染霜华 Lv.1
Chrome 103.0.0.0 
Windows 回复
上海市 移动
mars7825 Lv.1
Chrome 103.0.5060.66 
Windows 回复
支持一下，黑蜘蛛博客有你更精彩
上海市 电信
The Joker Lv.1
Chrome 96.0.4664.10 
Samsung 回复
感谢黑蜘蛛!
四川省成都市 电信
11111111 Lv.1
Sogou Explorer 
Windows 回复
1a啊
广东省 电信
、Sτогу& Lv.1
Chrome 103.0.0.0 
Mac OS X 10.15.7 回复
广东省广州市 电信
一帆风顺 Lv.1
Android Webkit 4.0 
Android 10 回复
这个资源找了好久了！
广东省清远市 电信
执念 Lv.1 回复
00000啊大苏打
河北省保定市 电信
古老至极 Lv.1 回复
河南省郑州市 联通
小佳 Lv.1
Chrome 102.0.0.0 
Windows 回复
谢谢了
北京市 移动
111 Lv.1
Chrome 69.0.3947.100 
Windows 回复
感谢楼主
，好人一生平安
山东省济南市 移动