效果图：一个好看的标签云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>
评论
67条评论202018720 Lv.1
Internet Explorer 
iPhone iOS 14.0.1 回复
试试刚好需要
广东省佛山市 电信
Journey Lv.1
Chrome 103.0.0.0 
Windows 回复
中国 电信骨干网
114514 Lv.1 回复
北京市 移动
w770340211 Lv.3
Chrome 69.0.3947.100 
Windows 回复
不错不错，味道好极了
北京市 移动
mengguo Lv.1
Chrome 95.0.4638.69 
Windows 回复
感谢楼主
，好人一生平安
安徽省芜湖市 电信
2550863610 Lv.1 回复
四川省成都市 移动GSM/TD-SCDMA/LTE全省共用出口
865607867 Lv.1
Chrome 97.0.4692.71 
Windows 回复
表情支持一下，黑蜘蛛博客有你更精彩
广东省深圳市 电信
cmccadmin Lv.1
Firefox 98.0 
Windows 回复
中国 移动
zz123456 Lv.1
Chrome 98.0.4758.81 
Windows 7 回复
adwqerqweqqqqqqqqqq
陕西省西安市 电信
ryj233 Lv.1 回复
河南省信阳市 移动