效果图：一个好看的标签云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>
评论
32条评论qq81363880 Lv.2
Chrome 109.0.5414.121 
Windows 7 x64 Edition 回复
不错不错，味道好极了
河南省新乡市 联通
Sweet1 Lv.2 回复
66666666666666666
北京市 移动
P'f Lv.1
Android Webkit 4.0 
Android 12 回复
柚
广东省韶关市 电信
sugar Lv.2
Chrome 111.0.0.0 
Windows 回复
看着不错
浙江省杭州市 移动
motsai Lv.1
Chrome 109.0.0.0 
Windows 回复
广东省广州市天河区 电信
1234 Lv.1
Chrome 97 
Android 10 回复
这个还不错
（只为获取密码）
黑龙江省牡丹江市 电信
colwl Lv.1
Chrome 94.0.4606.71 
Windows 回复
获取密码
广西柳州市 电信
2101839259 Lv.1
Android Webkit 4.0 
Android 10 回复
获取密码
湖北省武汉市 联通
2101839259 Lv.1
Android Webkit 4.0 
Android 10 回复
看看
湖北省武汉市 联通
mooni Lv.1
Chrome 107.0.0.0 
Mac OS X 10.15.7 回复
获取密码
中国 移动