效果图：一个好看的标签云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>
评论
29条评论84745445 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主
，好人一生平安
广东省广州市 电信
东 Lv.1
Chrome 105.0.0.0 
Windows 回复
新疆乌鲁木齐市 电信
潇洒先生 Lv.1
Chrome 94.0.4606.71 
Windows 回复
学习一下
安徽省黄山市 联通
jaysun Lv.1
Chrome 86.0.4240.198 
Windows 回复
看一下
山东省 联通
努力学习 Lv.1
Chrome 103.0.0.0 
Windows 回复
支持支持
北京市海淀区 联通
武大郎 Lv.1
Chrome 77.0.3865.120 
Windows 7 x64 Edition 回复
湖北省恩施州 移动
有趣源码 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主
，好人一生平安
陕西省安康市 移动
w770340211 Lv.3
Chrome 69.0.3947.100 
Windows 回复
资源很给力啊
北京市 移动
小張是我 Lv.1 回复
来了一个月的便宜
山东省烟台市 联通
崔 Lv.1 回复
支持一下，黑蜘蛛博客有你更精彩
中国 移动