蓝叶博客

青春是一个充满活力的季节,即便是我们失去了天使的翅膀,只要我们还有一颗青春的心,那么我们的生活依然能够如阳光般灿烂!......
现在位置:首页 > 网站模板 > 一个好看的标签云js代码

一个好看的标签云js代码

蓝叶    网站模板    2021-01-16    400    0评论    
  • 适用版本 : EMLOG5.3.X
  • 模版类别 : html模版
  • 适用站点 : 标签页效果
  • 模版性质 : 免费模版
  • 版权所属 : 互联网
  • 模版预览 : 看图预览或联系作者
  • 模版价格 : ¥0
  • 一个好看的标签云js代码
    一个好看的标签云js代码
  • 一个好看的标签云js代码2
    一个好看的标签云js代码2
  • 更多演示联系蓝叶站长

一个好看的标签云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 = [];
    for(var i = 0; i < titles.length; i++) {
        words[i] = {
            "title" : titles[i],
            "url" : ""
        }
    }
    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>
评论一下 分享本文 赞助蓝叶

赞助蓝叶X

扫码赞助蓝叶
联系站长
蓝叶博客
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
加载中....
快捷导航 返回顶部
技术QQ群
音乐QQ群
付费服务
音乐欣赏
友情链接
保存桌面
给我留言
返回顶部