效果图：一个好看的标签云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条评论qgqmjqr Lv.1 回复
这个可以
广东省广州市 电信
唐山晴空 Lv.1
Chrome 95.0.4638.69 
Windows 回复
感谢楼主
，好人一生平安
河北省唐山市 电信
adisok Lv.2
Chrome 107.0.0.0 
Windows 回复
呵呵哈哈哈或
河南省洛阳市 联通
浪浪 Lv.1
Chrome 94.0.4606.71 
Windows 回复
谢谢
江苏省 移动
ioni88 Lv.2
Chrome 78.0.3904.108 
Windows 回复
江苏省苏州市 电信
dddd Lv.1
Chrome 78.0.3904.108 
Windows 回复
江苏省苏州市 电信
4 Lv.1
Chrome 76.0 
Android 10 回复
哈哈哈哈
新疆 电信
齐艺 Lv.1
Chrome 86.0.4240.198 
Windows 7 x64 Edition 回复
中国 移动
乾坤 Lv.1 回复
感谢大佬的分享。
山东省青岛市 移动
空白. Lv.1
Sogou Explorer 
Windows 回复
看看啥写的
江西省鹰潭市 电信