效果图：一个好看的标签云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>
评论
11条评论wuming Lv.1 回复
香港 电讯盈科有限公司
乀丶鲨鱼辣椒丶 Lv.1
Chrome 95.0.4638.69 
Windows 7 回复
感谢楼主
，好人一生平安
贵州省贵阳市 电信
724070450 Lv.1
Firefox 113.0 
Windows 7 x64 Edition 回复
www.baidu.com 百度一下
山东省临沂市 电信
贷款保险信用卡 Lv.1
Chrome 112.0.0.0 
Windows 回复
这个程序不错
中国 移动
tyc-hzz Lv.1
Chrome 107.0.0.0 
Windows 7 回复
来了拉了
山东省济南市 联通
zoutx Lv.1
Chrome 86.0.4240.198 
Windows 回复
湖北省武汉市 电信
自媒体平台 Lv.1
Chrome 92.0.4515.107 
Windows 回复
不错，必须顶一下！
河南省南阳市 联通
十牸じ☆璐口 Lv.1
Chrome 90.0.4430.85 
Windows 回复
感谢楼主
，好人一生平安
香港 Cloudie数据中心
ppt课件 Lv.1
Firefox 86.0 
Windows 7 x64 Edition 回复
非常不错！关注一下。资源牛
北京市 移动
CQTKS Lv.1
Chrome 70.0.3538.25 
Windows 7 x64 Edition 回复
资源很给力啊
江苏省泰州市 电信