效果图：一个好看的标签云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条评论xiaolanjian Lv.1
Chrome 118.0.0.0 
Windows 回复
谢谢楼主分享
美国 加州
meetness1 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主分享
江苏省南京市 移动
happy333 Lv.1
Chrome 129.0.0.0 
Windows 回复
支持一下，黑蜘蛛博客有你更精彩
江西省宜春市 电信
fq127 Lv.1
Chrome 86.0.4240.198 
Windows 7 x64 Edition 回复
不错不错，味道好极了
贵州省 移动
LIULIWANJIA Lv.1
Chrome 127.0.0.0 
Windows 回复
新人报道
学习一下
台湾省 中华电信(HiNet)数据中心
LIULIWANJIA Lv.1
Chrome 127.0.0.0 
Windows 回复
安徽省合肥市 电信
Lily123 Lv.1
Chrome 121.0.0.0 
Windows 回复
来了来了。。。。。。。。。。。。。。。。。。。。
广东省 移动
hgy1234 Lv.1
Chrome 114.0.5735.289 
Windows 7 回复
感谢楼主
，好人一生平安
湖北省宜昌市 电信
xu456120 Lv.1
Chrome 119.0.0.0 
Windows 回复
黑蜘蛛博客有你更精彩
福建省厦门市 移动
momo666 Lv.1 回复
中国 移动