效果图：一个好看的标签云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条评论CJF14ANI Lv.1
Chrome 102.0.5005.61 
Windows 7 回复
感谢楼主
，好人一生平安
浙江省金华市义乌市 电信
fugges Lv.1 回复
址不址不
四川省成都市 电信
jj1 Lv.1
Chrome 69.0.3947.100 
Windows 7 x64 Edition 回复
江苏省苏州市 电信
sdd Lv.1
Chrome 101.0.4951.67 
Windows 7 回复
...asdsad手打
浙江省杭州市拱墅区 电信
sdad Lv.1
Chrome 99.0.4844.82 
Windows 回复
感谢楼主
，好人一生平安
河南省洛阳市 电信
甜菜 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢老哥分享
江苏省无锡市 电信
YipGraGin Lv.1
Chrome 100.0.4896.127 
Windows 回复
感谢
广东省东莞市 联通
钉子 Lv.1
Safari 15.4 
Mac OS X 10.15.7 回复
谢谢
北京市 电信
我问问 Lv.1
Chrome 86.0.4240.198 
Windows 回复
虚心学习！！
内蒙古呼和浩特市 电信
bvg xx Lv.1 回复
甘肃省庆阳市 电信