效果图：一个好看的标签云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条评论xbg123 Lv.1
Chrome 99.0.4844 
Android 10 回复
楼主加油
，期待更好的内容
广东省 移动
fq127 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主
，好人一生平安
广东省揭阳市 联通
dafdsfd Lv.1
Chrome 111.0.0.0 
Windows 回复
好好好
黑龙江省哈尔滨市 电信
1083213061 Lv.1
Chrome 108.0.5359.95 
Windows 回复
重庆市 联通
ncxxwb Lv.1
Chrome 69.0.3947.100 
Windows 7 x64 Edition 回复
看看怎样
四川省成都市 电信
xinink Lv.1
Chrome 109.0.0.0 
Windows 回复
试一试
河南省郑州市 联通
1346759989 Lv.1
Chrome 107.0.0.0 
Windows 回复
试试哈哈哈
北京市 新国信通信有限公司
fg188 Lv.1
Chrome 100.0.4896.60 
Windows 7 回复
看下
广东省 电信
iosvip520 Lv.1
Chrome 102.0.0.0 
Windows 回复
感谢楼主，好人一生平安
安徽省芜湖市 电信
cc36tv Lv.1
Chrome 78.0.3904.108 
Mac OS X 10.11.6 回复
好人一生平安7776777
河南省郑州市 电信