效果图：一个好看的标签云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>
评论
144条评论猫猫 Lv.1
Chrome 104.0.0.0 
Windows 回复
支持支持
广东省珠海市 电信
师大 Lv.1
Chrome 105.0.0.0 
Windows 回复
感谢感谢
江苏省苏州市 电信
SASASAWWW Lv.1
Chrome 105.0.0.0 
Windows 回复
持一下，黑蜘蛛博客有你更精彩
福建省福州市 联通
是撒多、 Lv.1
Chrome 105.0.0.0 
Windows 回复
支持一下
福建省福州市 联通
1 Lv.1
Chrome 97.0 
Android 10 回复
下载
辽宁省沈阳市 联通GSM/WCDMA/LTE共用出口
erliang Lv.1
Safari 15.5 
Mac OS X 10.15.7 回复
北京市 联通
erliang Lv.1
Safari 15.5 
Mac OS X 10.15.7 回复
感谢楼主
，好人一生平安
北京市 联通
ThinkRoY Lv.1
Chrome 103.0.5060.134 
Windows 回复
支持一下
上海市 移动
起风了。 Lv.1
Chrome 104.0.0.0 
Windows 回复
支持一下
贵州省贵阳市 电信
执迷的鲸鱼 Lv.1
Chrome 86.0.4240.198 
Windows 回复
学习
河北省秦皇岛市 联通