效果图：一个好看的标签云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>
评论
72条评论aa Lv.1
Chrome 111.0.0.0 
Windows 回复
重庆市开县 电信
骑着猪去逛街^@^ Lv.1
Chrome 110.0.0.0 
Windows 回复
江西省九江市 电信
小离 Lv.1
Chrome 79.0.3945.79 
Windows 7 x64 Edition 回复
看看 哈哈
吉林省长春市 联通
绿夏 Lv.1
Chrome 109.0.0.0 
Windows 回复
广西贵港市 联通
idaidai Lv.1
Chrome 109.0.0.0 
Windows 回复
感谢楼主表情，好人一生平安
内蒙古赤峰市 联通
陈小儒 Lv.1
Chrome 108.0.0.0 
Windows 回复
辽宁省 移动
飞雪连天射白鹿 Lv.1
Chrome 108.0.0.0 
Mac OS X 10.15.7 回复
来了，是否可以
广东省广州市 电信
Aiden76876 Lv.1
Chrome 86.0.4240.198 
Windows 7 x64 Edition 回复
感谢楼主
，好人一生平安
广东省深圳市 联通GSM/WCDMA/LTE全省共用出口
一二三四五 Lv.1
Chrome 81.0.4044.145 
Windows 7 x64 Edition 回复
四川省成都市 移动
Mr.Sui Lv.1
Chrome 108.0.0.0 
Windows 回复
真的假的
广西南宁市 电信