效果图:一个好看的标签云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条评论913208575 Lv.1 Chrome 114.0.5735.289 Windows 回复
看看能不能用
云南省曲靖市 电信
hrdf1 Lv.1 Chrome 119.0.0.0 Windows 回复
支持一下,黑蜘蛛博客有你更精彩
河南省郑州市 电信
luenmicro Lv.1 Chrome 114.0.5735.289 Windows 7 回复
asdfsf范德萨范德萨发发
广东省佛山市 电信
Q329344526 Lv.1 回复
支持一下,黑蜘蛛博客有你更精彩
四川省眉山市 电信
loveberry119 Lv.1 Chrome 108.0.5359.125 Windows 回复
支持一下,黑蜘蛛博客有你更精彩
台湾省 中华电信(HiNet)数据中心
xftool Lv.1 Chrome 86.0.4240.198 Windows 回复
试试行不行啊
贵州省贵阳市 电信
431843180 Lv.1 Chrome 108.0.5359.95 Windows 7 x64 Edition 回复
可以可以66666
重庆市 联通
david163 Lv.1 Chrome 79.0.3945.79 Windows 7 x64 Edition 回复
不错不错,味道好极了
湖北省宜昌市 移动
gzhkcom Lv.1 Chrome 95.0.4638.69 Windows 7 回复
感谢楼主,好人一生平安
广东省 电信
srjhbzdsf Lv.1 Chrome 86.0.4240.198 Windows 回复
啊啊啊啊啊啊啊啊啊
四川省德阳市 电信