效果图：一个好看的标签云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>
评论
14条评论723727185 Lv.1
Chrome 86.0.4240.198 
Windows 回复
723727185
安徽省宿州市 电信
lxmhtt Lv.1
Chrome 86.0.4240.198 
Windows 回复
新人报道
学习一下
辽宁省沈阳市 电信CDMA/LTE全省共用出口
sclkcy Lv.1
Chrome 86.0.4240.198 
Windows 8.1 x64 Edition 回复
看能不能安装成功了
四川省攀枝花市 移动
osincc Lv.1
Chrome 86.0.4240.198 
Windows 回复
谢谢分享
安徽省淮北市 电信
与你888丶 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主表情，好人一生平安
上海市 电信
GENEXY Lv.1
Chrome 79.0.3945.130 
GNU/Linux x64 回复
感谢。
陕西省西安市 联通
catka Lv.1 回复
感谢楼主
，好人一生平安
上海市 联通
sarkur Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主
，好人一生平安
广东省深圳市 电信
fjmwkj Lv.1
Chrome 95.0.4638.54 
Windows 回复
谢谢分享
福建省福州市 联通
baojun026 Lv.1
Chrome 86.0.4240.198 
Windows 回复
广东省东莞市 电信