效果图：一个好看的标签云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>
评论
12条评论wxlei Lv.1 回复
111111111111
广东省东莞市 电信
sugar Lv.2
Chrome 111.0.0.0 
Windows 回复
666
浙江省杭州市 移动
- Lv.1
Chrome 101.0.4951.58 
Windows 回复
酷
北京市 移动
2597503 Lv.1
Android Webkit 4.0 
Android 12 回复
6666666
陕西省西安市 联通
adisok Lv.2
Chrome 107.0.0.0 
Windows 回复
搞起来
河南省洛阳市 联通
wjt246932 Lv.1
Chrome 86.0.4240.198 
Windows 回复
中国 移动
1633627246 Lv.1
Chrome 86.0.4240.198 
Windows 回复
1
浙江省杭州市 电信
lssun Lv.5 回复
支持
广东省东莞市 联通
jianshen54 Lv.1
Chrome 86.0.4240.198 
Windows 7 x64 Edition 回复
感谢楼主
，好人一生平安
河南省信阳市 电信
So So ... 838 Lv.1
Chrome 86.0.4240.198 
Windows 回复
死咳咳咳
西藏 电信