一个好看的标签云js代码
- 适用版本 : EMLOG5.3.X
- 模版类别 : html模版
- 适用站点 : 标签页效果
- 模版性质 : 免费模版
- 版权所属 : 互联网
- 模版预览 : 看图预览或联系作者
- 模版价格 : ¥0元
一个好看的标签云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>
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《蓝叶》。
- 本文网址:https://lanye.org/wangzhanmuban/937.html
- 上篇文章:蓝叶分享百度图床接口php代码
- 下篇文章:emlog蓝叶导航菜单图标插件