效果图：一个好看的标签云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条评论rr66 Lv.1
Firefox 103.0 
Windows 8 x64 Edition 回复
安徽省合肥市 电信
傻夶兔子 Lv.1
Chrome 103.0.0.0 
Mac OS X 10.15.7 回复
支持一下，黑蜘蛛博客有你更精彩
北京市 联通
mick2458 Lv.1
Chrome 103.0.0.0 
Windows 回复
广东省汕头市 电信
木头 Lv.1
Chrome 103.0.0.0 
Windows 回复
感谢楼主
，好人一生平安
广东省汕头市 电信
我的电恼白嫖影视 Lv.1
Chrome 
Android 10 回复
山东省潍坊市 移动
121212 Lv.3
Chrome 86.0.4240.198 
Windows 回复
谢谢分享
广东省深圳市 电信
ken1231 Lv.1
Sogou Explorer 
Windows 回复
电子邮件地址不会被公开。 必填项已用*标注
江苏省苏州市 电信
Y Lv.1
Chrome 99.0.4844.74 
Windows 回复
电子邮件地址不会被公开。 必填项已用*标注
河南省郑州市 电信
神奇的下划线 Lv.1
Chrome 86.0.4240.198 
Windows 回复
少发生了发送
上海市 移动
1 Lv.1
Chrome 102.0.0.0 
Windows 回复
少时诵诗书所所
加拿大