效果图：一个好看的标签云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条评论kiki Lv.1
Chrome 127.0.0.0 
Windows 回复
感谢感谢
河南省濮阳市 联通
caful Lv.1
Chrome 120.0.0.0 
Windows 回复
感谢楼主表情，好人一生平安
广东省深圳市 电信
wuwuwa Lv.1
Chrome 120.0.0.0 
Windows 回复
感谢楼主表情，好人一生平安
北美地区
wuwu Lv.1
Chrome 120.0.0.0 
Windows 回复
厉害
广东省深圳市 电信
dsh224 Lv.1
Chrome 114.0.5735.289 
Windows 回复
山东省 移动
zhi9456 Lv.1
Chrome 120.0.0.0 
Windows 回复
四川省宜宾市 电信
heyihang Lv.1 回复
资源很给力啊
陕西省西安市 联通
wxlei Lv.1 回复
看看行不行
广东省东莞市 电信
的答案奥奥 Lv.1
Chrome 101.0.4951.64 
Windows 7 x64 Edition 回复
sad撒多撒大所
河北省 移动
阿萨大大萨达 Lv.1 回复
撒旦撒大苏打大苏打撒旦撒大阿a撒大苏打大撒松大大苏打
河北省石家庄市 联通