效果图:一个好看的标签云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条评论心动龙龙^ Lv.1 Chrome 94.0.4606.71 Windows 回复
感谢楼主,好人一生平安
山西省晋中市 联通
tyc-hzz Lv.1 Chrome 107.0.0.0 Windows 7 回复
支持一下,黑蜘蛛博客有你更精彩
山东省济南市 联通
sb Lv.1 Chrome 107.0.0.0 Windows 7 回复
支持
中国 移动
g437446776 Lv.1 Chrome 107.0.0.0 Windows 回复
表情支持一下,黑蜘蛛博客有你更精彩
浙江省台州市 移动
曾羽彤 Lv.1 Safari 16.0 Mac OS X 10.15.7 回复
哈哈
福建省福州市 移动
123456789 Lv.1 Chrome 105.0.0.0 Windows 回复
支持一下,黑蜘蛛博客有你更精彩
广东省东莞市 移动
msata Lv.1 Chrome 86.0.4240.198 Windows 回复
支持一下,黑蜘蛛博客有你更精彩
浙江省湖州市长兴县 电信
锦绣昕程 Lv.1 Chrome 106.0.0.0 Windows 回复
支持一下,黑蜘蛛博客有你更精彩
广东省 移动
xixi Lv.1 Chrome 103.0.0.0 Windows 回复
1111好
湖北省武汉市 电信
111 Lv.1 Chrome 105.0.0.0 Windows 回复
111111111111AFHFe给对方手机
江苏省常州市 电信