效果图：一个好看的标签云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>
评论
9条评论bayan421 Lv.1
Chrome 86.0.4240.198 
Windows 回复
谢谢
新疆和田地区 联通
l230686750 Lv.1
Firefox 94.0 
Windows 回复
好好
江西省新余市 渝洲科技学院
YipGraGin Lv.1
Chrome 100.0.4896.127 
Windows 回复
广东省东莞市 联通
yang8247615 Lv.1 回复
山东省 电信
3082347 Lv.3 回复
谢谢分享
湖南省常德市 电信
kele4962 Lv.1
Chrome 86.0.4240.198 
Windows 回复
广东省东莞市 移动
123456 Lv.2
Firefox 89.0 
Windows 回复
感谢分享
江苏省泰州市 电信
cc963020001 Lv.1
Chrome 90.0.4430.85 
Windows 回复
新人报道
学习一下
江苏省苏州市 电信
610836647 Lv.1
Chrome 70.0.3538.25 
Windows 7 x64 Edition 回复
谢谢分享
湖北省孝感市 移动