效果图：一个好看的标签云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条评论半句 Lv.1
Chrome 103.0.0.0 
Windows 回复
666,感谢黑蜘蛛
江苏省南京市 电信
error1983 Lv.1
Chrome 95.0.4638.69 
Windows 回复
福建省莆田市 联通
执念 Lv.1
Chrome 103.0.5060.134 
Windows 回复
。。就看宝贝回家
河北省保定市 电信
彷徨Ψ Lv.1
Chrome 103.0.5060.134 
Windows 回复
加油黑蜘蛛！
湖南省郴州市 电信
ぷ豆豆ぷ Lv.1
Internet Explorer 11.0 
Windows 7 x64 Edition 回复
试试看
江苏省 移动
(^_^)囍囍(^_^) Lv.1
Chrome 69.0.3947.100 
Windows 回复
多谢多谢
广东省 移动
潘俊 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主表情，好人一生平安
河南省郑州市 移动
网红123 Lv.1
Chrome 57.0.2987.1 
Android 11 回复
支持一下
新疆乌鲁木齐市 移动GSM/TD-SCDMA/LTE全省共用出口
〆 安度晚年。 Lv.1
Chrome 94.0.4606.71 
Windows 7 x64 Edition 回复
新疆乌鲁木齐市 电信
白衣染霜华. Lv.1
Chrome 103.0.0.0 
Windows 回复
上海市 移动