效果图：一个好看的标签云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>
评论
19条评论bestorange Lv.1
Chrome 138.0.0.0 
Windows 回复
首次测试，希望有惊喜
柬埔寨
ccccaa Lv.1
Chrome 137.0.0.0 
GNU/Linux x64 回复
ddd
美国
cantu Lv.1
Chrome 131.0.0.0 
Mac OS X 10.15.7 回复
dd
江苏省苏州市 电信
leondick Lv.1
Chrome 131.0.0.0 
Windows 回复
确定能用？
中国 移动
aa12330 Lv.1
Chrome 130.0.0.0 
Windows 回复
支持一下，黑蜘蛛博客有你更精彩
美国 惠普公司
wang06200119 Lv.1
Chrome 123.0.0.0 
Windows 回复
亚太地区
jackaiwy Lv.1
Chrome 126.0.0.0 
Windows 回复
终于找到了 赞赞
IANA 保留地址
qazx1314 Lv.1
Chrome 126.0.0.0 
Windows 回复
支持一下
台湾省台北市 台固媒体股份有限公司(台湾大宽频)BGP节点
913208575 Lv.1
Chrome 114.0.5735.289 
Windows 回复
看看能不能用
云南省曲靖市 电信
hrdf1 Lv.1
Chrome 119.0.0.0 
Windows 回复
支持一下，黑蜘蛛博客有你更精彩
河南省郑州市 电信