效果图：一个好看的标签云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>
评论
9条评论BFHUI Lv.1
Safari 16.1 
Mac OS X 10.15.7 回复
Sdkfkdskfk
湖南省娄底市 联通
happyzyh Lv.1
Chrome 86.0.4240.198 
Windows 回复
牛逼
中国 移动
lxy075 Lv.1
Chrome 86.0.4240.198 
Windows 回复
试试
北京市 电信
225411 Lv.1
Chrome 86.0.4240.198 
Windows 回复
看看my
安徽省 联通
xiao1bai2ge3 Lv.1
Chrome 69.0.3947.100 
Windows 回复
广东省东莞市 电信
adisok Lv.2
Chrome 107.0.0.0 
Windows 回复
河南省洛阳市 联通
960777365 Lv.1
Internet Explorer 
iPhone iOS 15.6.1 回复
试试
中国 移动
927943270 Lv.1
Chrome 92.0.4515. 
Android 10 回复
害
中国 移动
xiaowen Lv.2
Chrome 86.0.4240.198 
Windows 回复
广东省东莞市 电信