效果图：一个好看的标签云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>
评论
10条评论liuyewen Lv.1
Chrome 134.0.0.0 
Windows 回复
www
香港 特别行政区
3rWdn Lv.1
Chrome 131.0.0.0 
Windows 回复
wwwwwwwww
局域网 对方和您在同一内部网
xituwa Lv.1
Chrome 95.0.4638.69 
Windows 回复
看样子还可以，试试看把先
河南省新乡市 联通
lqh4984 Lv.1 回复
试试看
云南省昆明市 电信CDMA/LTE全省共用出口
2318942047 Lv.1
Firefox 113.0 
Windows 回复
带式输送机
河南省 移动
btwise Lv.1
Chrome 84.0.4147.111 
Android 10 回复
可以下载试试
内蒙古 联通
ndcc5 Lv.1
Chrome 103.0.0.0 
Windows 回复
看起来不错的样纸
山东省日照市 联通
mua123 Lv.1
Chrome 94.0.4606.71 
Windows 回复
666
陕西省西安市 电信
Sweet1 Lv.2
Chrome 105.0.0.0 
Windows 回复
感谢楼主
，好人一生平安
北京市 移动
yyzqd123 Lv.1
Chrome 86.0.4240.198 
Windows 回复
江苏省徐州市 电信