扫一扫浏览

原生javascript组件tagscloud.js文字标签仿快播文字标签云上下滚动效果

未结贴
0 320
许长老未认证 2019-02-10 09:23:50
收藏

效果图

文字标签

CSS代码

body{ font-family:"微软雅黑", Arial, sans-serif;} #main{border:none; background:none;}
body,ul,li,h1,h2,h3,p,form{margin:0;padding:0;}body{background:#fbfbfb;color:#444;font-size:14px;}
a{color:#444;text-decoration:none;}a:hover{color:red;}
/* tagscloud */
#tagscloud{width:250px;height:260px;position:relative;font-size:12px;color:#333;margin:20px auto 0;text-align:center;}
#tagscloud a{position:absolute;top:0px;left:0px;color:#333;font-family:Arial;text-decoration:none;margin:0 10px 15px 0;line-height:18px;text-align:center;font-size:12px;padding:1px 5px;display:inline-block;border-radius:3px;}
#tagscloud a.tagc1{background:#666;color:#fff;}
#tagscloud a.tagc2{background:#F16E50;color:#fff;}
#tagscloud a.tagc5{background:#006633;color:#fff;}
#tagscloud a:hover{color:#fff;background:#0099ff;}

html代码

<div id="tagscloud">
  <a href="https://www.tpframe.com/" class="tagc1">JAVA</a>
  <a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
  <a href="https://www.tpframe.com/" class="tagc5">PHP</a>
  <a href="https://www.tpframe.com/" class="tagc2">JAVA<a>
  <a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
  <a href="https://www.tpframe.com/" class="tagc1">JAVASCRIPT</a>
  <a href="https://www.tpframe.com/" class="tagc2">JAVA</a>
  <a href="https://www.tpframe.com/" class="tagc5">PHP</a>
  <a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
  <a href="https://www.tpframe.com/" class="tagc2">python</a>
  <a href="https://www.tpframe.com/" class="tagc5">JAVA</a>
  <a href="https://www.tpframe.com/" class="tagc2">PHP</a>
  <a href="https://www.tpframe.com/" class="tagc1">JAVA</a>
  <a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
  <a href="https://www.tpframe.com/" class="tagc5">PHP</a>
  <a href="https://www.tpframe.com/" class="tagc2">JAVA<a>
  <a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
  <a href="https://www.tpframe.com/" class="tagc1">JAVASCRIPT</a>
  <a href="https://www.tpframe.com/" class="tagc2">JAVA</a>
  <a href="https://www.tpframe.com/" class="tagc5">PHP</a>
  <a href="https://www.tpframe.com/" class="tagc2">C/C++</a>
  <a href="https://www.tpframe.com/" class="tagc2">python</a>
  <a href="https://www.tpframe.com/" class="tagc5">JAVA</a>
  <a href="https://www.tpframe.com/" class="tagc2">PHP</a>
</div>
<script src='js/tagscloud.js' type="text/javascript"></script>

点击下载完整代码

最近热帖 HOT TOPIC
thinkphp5隐藏默认模块的一些问题 1778
父元素flex之后,子元素高度自适应问题 1728
【全套视频】thinkphp5视频教程 1616
教你如果处理高并发数据不同步的问题php篇 1453
关于thinkphp5.0.x getshell漏洞的说明 1396
tpframe新建主题 1325
tpframe安装教程 1304
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 1300
TPFrame框架robot模块重磅来袭,内附2.1版本 1297
移动web资源整理,你值得收藏的干货 1282
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 4
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3
thinkphp5自动完成操作,两次运行的详解 2
tpframe-curd操作之添加数据 2
tpframe能带给你的,让你快速搞定各服务端(api,pc,mobile,wechat)代码的框架 2
爆料早知道:Tcms小程序功能已上线我有好想法