效果图：一个好看的标签云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条评论need login Lv.1 回复
资源很给力啊
河北省廊坊市 电信
AI黑蜘蛛 Lv.1
Chrome 119.0.0.0 
Windows 回复
中国 移动
awds Lv.1
Sogou Explorer 
Windows 回复
美国 康涅狄格州费尔菲尔德县费尔菲尔德镇通用电气公司
多多 Lv.1
Chrome 69.0.3947.100 
Windows 回复
谢谢漏罪
吉林省长春市 电信
766611121 Lv.1
Firefox 117.0 
Windows 回复
谢楼主表情，好人一生平安
广东省茂名市 电信
SSS Lv.1 回复
支持一下，黑蜘蛛博客回复了回复了回复了SSS
江苏省南通市 电信
ASSS Lv.1 回复
见过如此精sdasfsdfvds
上海市宝山区 电信
小朱 Lv.1
Chrome 108.0.5359.125 
Windows 7 x64 Edition 回复
下载看看能不能用
江苏省泰州市靖江市 电信
xianxian Lv.1
Chrome 108.0.5359.95 
Windows 回复
感谢楼主
，好人一生平安
上海市 电信
1111 Lv.1
Chrome 108.0.5359.95 
Windows 回复
看看
上海市 电信