扫一扫浏览

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

未结贴
0 263
许长老未认证 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隐藏默认模块的一些问题 1486
【全套视频】thinkphp5视频教程 1443
教你如果处理高并发数据不同步的问题php篇 1238
tpframe安装教程 1187
TPFrame框架robot模块重磅来袭,内附2.1版本 1181
tpframe新建主题 1159
父元素flex之后,子元素高度自适应问题 1152
tpframe应用目录结构 1108
slide模块发布 1095
thinkphp5自动完成操作,两次运行的详解 1087
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 3
thinkphp5自动完成操作,两次运行的详解 2
tpframe-curd操作之添加数据 2
tpframe能带给你的,让你快速搞定各服务端(api,pc,mobile,wechat)代码的框架 2
爆料早知道:TPFrame v3.2版本已更新我有好想法