效果图：一个好看的标签云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条评论乀丶鲨鱼辣椒丶 Lv.1
Chrome 95.0.4638.69 
Windows 7 回复
感谢楼主
，好人一生平安
贵州省贵阳市 电信
a'ゞ筱明 Lv.1
Chrome 99.0.4844 
Android 12 回复
资源很给力啊广西百色市 电信
qq6787875 Lv.1
Firefox 113.0 
Windows 回复
感谢楼主表情，好人一生平安！！！！
广东省 电信
幸福de承诺三大幅 Lv.1
Chrome 108.0.5359.95 
Windows 回复
好用么
山东省烟台市 联通
撒旦2阿达达 Lv.3
Chrome 108.0.5359.95 
Windows 回复
感谢楼主表情，好人一生平安！！！！
四川省广元市 电信
121212 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主
，好人一生平安
广东省深圳市 电信
星月 Lv.1
Chrome 95.0.4638.69 
Windows 回复
感谢分享
湖南省湘西州吉首市 电信
缓一缓 Lv.1
Chrome 95.0.4638.69 
Windows 7 回复
谢谢了啊。。。。。。。。。。。。。。。。
中国 移动
魔盘 Lv.1
Android Webkit 4.0 
Android 12 回复
中国 移动
saioc Lv.1
Chrome 110.0.0.0 
Windows 回复
感谢分享！
山东省济宁市 联通