效果图：一个好看的标签云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>
评论
31条评论Antonidas Lv.1
Chrome 111.0.0.0 
Mac OS X 10.15.7 回复
支持一下，黑蜘蛛博客有你更精彩
陕西省西安市 电信
cyn070033 Lv.1
Sogou Explorer 
Windows 回复
感谢楼主
，好人一生平安
北京市 移动
19862270361 Lv.1
LBrowser 8.0.0.1 
Windows 回复
楼主加油
，期待更好的内容
山西省 电信
zhongxia Lv.1
Safari 15.6.1 
Mac OS X 10.15.7 回复
看看
北京市 移动
rocketman Lv.1
Chrome 107.0.0.0 
Mac OS X 10.15.3 回复
棒极了
广东省 移动
smq1996 Lv.1
Chrome 107.0.0.0 
Windows 回复
感谢分享，这个网站太棒了
浙江省 移动
love123 Lv.1
Chrome 105.0.0.0 
Windows 回复
浙江省金华市 电信
15854203969 Lv.1
Chrome 107.0.0.0 
Windows 回复
henhao
山东省青岛市 移动
yuyuyu Lv.1
Chrome 107.0.0.0 
Windows 回复
太好了
山东省青岛市 移动
goosoo Lv.1
Firefox 106.0 
Windows 回复
非常不错
上海市 移动
谭谭123 Lv.1
Chrome 107.0.0.0 
Windows 回复
回复了goosoo：
支持一下，黑蜘蛛博客有你更精彩
中国 移动