效果图：一个好看的标签云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>
评论
33条评论真不错的呢 Lv.1 回复
太棒了
河北省 移动
zw123123 Lv.1
Chrome 116.0.0.0 
Windows 回复
谢谢楼主，你真是个好人。
北京市 移动
xiaoming Lv.1 回复
试试
山东省聊城市 移动
552086273 Lv.1
Chrome 95.0.4638.69 
Windows 回复
膜拜学习
河南省洛阳市 电信
2662604432 Lv.1 回复
重庆市 电信
8321187 Lv.1
Chrome 109.0.0.0 
Windows 回复
支持一下，黑蜘蛛博客有你更精彩
江苏省无锡市 移动
dolby@69 Lv.1
Chrome 105.0.0.0 
Windows 7 x64 Edition 回复
内蒙古呼伦贝尔市 电信
zaq123 Lv.1
Chrome 97 
Android 10 回复
啊
中国 移动
sugar Lv.2
Chrome 112.0.0.0 
Windows 回复
感谢楼主
，好人一生平安
浙江省杭州市 移动
guyun Lv.1
Chrome 83.0.4103.106 
Android 11 回复
感谢楼主
，好人一生平安
江西省赣州市 电信