效果图：一个好看的标签云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条评论111 Lv.1
Chrome 105.0.0.0 
Windows 回复
111111111111AFHFe给对方手机
江苏省常州市 电信
大Q Lv.1
Chrome 86.0.4240.198 
Windows 7 x64 Edition 回复
新人报道表情学习一下
辽宁省葫芦岛市 联通
晓日明月 Lv.1
Chrome 94.0.4606.71 
Windows 回复
新人报道
学习一下
湖南省邵阳市邵东县 联通
雪野，夜苍狼 Lv.1
Chrome 
Android 12 回复
山东省济南市 移动
诚信妹子 Lv.1
Chrome 105.0.0.0 
Windows 回复
河北省石家庄市 联通
LY Lv.1
Chrome 105.0.0.0 
Windows 7 x64 Edition 回复
真的吗
北京市 移动
dasd日暮溫柔 Lv.1
Internet Explorer 11.0 
Windows 7 x64 Edition 回复
辽宁省 移动
ghgbhghgbh Lv.1
Chrome 76 
Android 11 回复
支持
北京市 移动
xjbz5566 Lv.1
Chrome 105.0.0.0 
Windows 回复
前来学习 支持楼主发帖
中国 移动
Frady2017 Lv.1
Chrome 105.0.0.0 
Windows 回复
支持支持
浙江省 电信