效果图:一个好看的标签云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>
评论
143条评论12 Lv.1 Chrome 94.0.4606.71 Windows 回复
资源很给力啊
四川省成都市 移动
蛋黄派2222 Lv.1 Android Webkit 4.0 Android 13 回复
感谢楼主,好人一生平安
广东省 移动
意中情木凡 Lv.1 Chrome 86.0.4240.198 Windows 7 x64 Edition 回复
支持一下,黑蜘蛛博客有你更精彩
广东省深圳市南山区 电信
the king Lv.1 Firefox 110.0 Windows 回复
感谢
福建省漳州市 移动
一个案件的机构 Lv.1 Chrome 94.0.4606.71 Windows 回复
支持一下,黑蜘蛛博客有你更精彩
四川省广安市 电信
鲍德温 Lv.1 Safari 15.6.1 Mac OS X 10.15.7 回复
支持一下,黑蜘蛛博客有你更精彩
江苏省 移动
吸血 Lv.1 Chrome 86.0.4240.198 Windows 7 x64 Edition 回复
6666666666666666楼主好人一身平安
广东省韶关市 移动
1 Lv.1 Chrome 110.0.0.0 Windows 回复
666啊
北京市 联通
嘉州貓 Lv.1 Firefox 109.0 Windows 回复
楼主好人一身平安
四川省 移动
。 Lv.1 Chrome 108.0.0.0 Windows 回复
66666好
山西省阳泉市 联通