效果图：一个好看的标签云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>
评论
67条评论errorbest Lv.1
Chrome 108.0.0.0 
Windows 回复
日本
wangeyun Lv.1
Chrome 108.0.0.0 
Windows 回复
感谢楼主
，好人一生平安
江西省赣州市 移动
q360663629 Lv.1
Chrome 107.0.0.0 
Windows 回复
滚犊子，不回
江苏省宿迁市 移动
macc001 Lv.1
Chrome 95.0.4638.69 
Windows 回复
会发现
浙江省嘉兴市 电信
macc001 Lv.1
Chrome 95.0.4638.69 
Windows 回复
谢谢分享
浙江省嘉兴市平湖市 电信
601666289 Lv.1
Chrome 95.0.4638.69 
Windows 回复
河南省洛阳市 电信
xiaozhen Lv.1
Chrome 94.0.4606.71 
Windows 回复
陕西省西安市 移动
n1qwatn3 Lv.1
Sogou Explorer 
Windows 回复
广西钦州市 电信
2755271615 Lv.1
Chrome 106.0.0.0 
Windows 回复
江苏省苏州市 电信
861173631 Lv.1
Chrome 106.0.0.0 
Windows 回复
666666666666666666666666
浙江省宁波市 联通