效果图：一个好看的标签云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>
评论
29条评论npwfqq Lv.1 回复
看起来好像不错的样子
浙江省杭州市 移动
npwfqq Lv.1 回复
学习一下
浙江省杭州市 移动
zhuoling1234 Lv.1 回复
新人报道
学习一下
四川省成都市 移动GSM/TD-SCDMA/LTE全省共用出口
老板娘 Lv.1 回复
四川省成都市 移动GSM/TD-SCDMA/LTE全省共用出口
cwz083 Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主分享
云南省昆明市 电信
8778787 Lv.1
Chrome 113.0.0.0 
Windows 回复
山东省青岛市 联通
wfAFAEGSEtg Lv.1
Chrome 109.0.0.0 
Windows 7 回复
感谢楼主表情，好人一生平安
河南省郑州市 联通
yinjianying2013 Lv.1
Chrome 86.0.4240.198 
Windows 回复
不错，谢谢
四川省 移动
ttt Lv.1
Chrome 86.0.4240.198 
Windows 回复
感谢楼主
，好人一生平安
内蒙古兴安盟乌兰浩特市 联通
一直不聪明 Lv.1
Chrome 102.0.5005.125 
Android 12 回复
江苏省 电信(全省通用)