效果图：一个好看的标签云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条评论need login Lv.1 回复
感谢
广西 移动
红红火火恍恍惚惚或 Lv.1
Chrome 86.0.4240.198 
Windows 7 x64 Edition 回复
感谢楼主
，好人一生平安
江苏省苏州市 电信
不二哥哥的ID Lv.1
Chrome 86.0.4240.198 
Windows 7 x64 Edition 回复
河北省保定市 联通
隐 Lv.1
Chrome 95.0.4638.69 
Windows 回复
试试不能下载啊
河北省保定市 联通
隐 Lv.1
Chrome 95.0.4638.69 
Windows 回复
试试
河北省保定市 联通
Mai15989976027 Lv.1
Chrome 108.0.5359.125 
Windows 回复
赞11111111111111
广东省佛山市 移动
zzz Lv.1
Chrome 108.0.5359.125 
Windows 回复
挺好的
山东省济宁市 联通
hhhhx Lv.1
Chrome 10 
Android 10 回复
ggg草泥马
广东省广州市 移动GSM/TD-SCDMA/LTE全省共用出口
黑鸭乖乖 Lv.1
Chrome 113.0.0.0 
Windows 回复
我要我要我要
广东省东莞市 电信
琪琪 Lv.1
Chrome 76.0 
Android 10 回复
感谢楼主
，好人一生平安
北京市 移动