效果图：一个好看的标签云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>
评论
32条评论liuyewen Lv.1
Chrome 134.0.0.0 
Windows 回复
666
香港 特别行政区
au2060 Lv.1
Chrome 131.0.0.0 
Windows 回复
test
澳洲 新南州OPTUS INTERNET零售互联网服务
suiyue9812 Lv.1
Chrome 131.0.0.0 
Windows 回复
66666
中国 移动
aoshen Lv.1 回复
6666666666
美国 华盛顿Cogent通信公司
qq81363880 Lv.2
Chrome 109.0.5414.121 
Windows 7 x64 Edition 回复
新人报道
学习一下
河南省新乡市 联通
daniaozzz Lv.1
Chrome 129.0.0.0 
Windows 回复
666
美国 华盛顿州西雅图市亚马逊(Amazon)公司数据中心
worker Lv.1
Chrome 127.0.0.0 
Windows 回复
泄露
福建省厦门市 电信
jujudeli Lv.1 回复
下载看看好不好
河南省郑州市 联通
ysmglb Lv.1
Chrome 91.0.4472.77 
Windows 7 回复
表情支持一下，黑蜘蛛博客有你更精彩
北京市 新国信通信有限公司
真不错的呢 Lv.1 回复
太棒了
河北省 移动