效果图：一个好看的标签云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>
评论
24条评论1537915479 Lv.1
Chrome 132.0.0.0 
Windows 回复
海南省海口市 电信
1648402012 Lv.1
Chrome 116.0.0.0 
Mac OS X 10.15.7 回复
1648402012
浙江省台州市天台县 电信
Jason Lv.1
Internet Explorer 
iPhone iOS 16.0.2 回复
来了
广东省汕头市 移动
绿绿仙子 Lv.1
Chrome 92.0.4515.131 
Android 11 回复
拿走了
北京市 移动
爱情千千万 Lv.1
Chrome 111.0.0.0 
Windows 回复
江苏省无锡市 电信
武器五千万 Lv.1
Chrome 108.0.0.0 
Windows 回复
资源很给力啊
湖北省宜昌市 移动
角落 Lv.1
Chrome 108.0.0.0 
Windows 7 回复
好人一生平安
北京市 联通
humane Lv.1
Chrome 104.0.0.0 
Windows 回复
吉林省四平市 联通
林先生 Lv.1
Chrome 99.0.4844.84 
Windows 回复
可以下载吗？
浙江省温州市 电信
闲乐云服务器 Lv.1
Chrome 104.0.5112.81 
Windows 回复
浙江省台州市玉环县 电信