效果图：一个好看的标签云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>
评论
35条评论sugar Lv.2
Chrome 112.0.0.0 
Windows 回复
感谢楼主
，好人一生平安
浙江省杭州市 移动
guyun Lv.1
Chrome 83.0.4103.106 
Android 11 回复
感谢楼主
，好人一生平安
江西省赣州市 电信
pingter Lv.1
Chrome 98.0.4758.139 
Windows 回复
表情支持一下，黑蜘蛛博客有你更精彩
吉林省长春市 吉林大学
visjia Lv.1
Chrome 111.0.0.0 
Windows 回复
广东省佛山市 电信
sqxy666 Lv.1
Chrome 99.0.4844.88 
Windows 回复
中国 移动
morans Lv.1
Chrome 104.0.0.0 
Windows 回复
看看了
中国 移动
1472580369 Lv.1
Android Webkit 4.0 
Android 11 回复
看看
北京市 移动
wzy1984cn Lv.1
Chrome 77.0.3865.90 
Windows 回复
能用不？
北京市 北京北方星辰信息技术有限责任公司铁通数据中心
132645 Lv.1
Chrome 87.0.4280.141 
Android 9 回复
66666
贵州省贵阳市 电信
542000610 Lv.1
Chrome 86.0.4240.198 
Windows 回复
支持下，谢谢老铁。
陕西省咸阳市渭城区 电信