当前位置: 首页 > article >正文

滚动插件SuperSlide的用法

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

                  <div class="weather-box"><ul class="row list-unstyled weather-ul"><li class="weather-box-li"><div class="whether-time pull-left">今天</div><div class="pull-left whether-logo"><div><img src="../../dist/img/changeSunny.png" alt="" /></div></div><div class="pull-left weather-infor"><div>21 ~ 15 ℃</div><div>1.01325 bar</div></div></li><li class="weather-box-li"><div class="whether-time pull-left">明天</div><div class="pull-left whether-logo"><div><img src="../../dist/img/sunny.png" alt="" /></div></div><div class="pull-left weather-infor"><div>21 ~ 15 ℃</div><div>1.01325 bar</div></div></li><li class="weather-box-li"><div class="whether-time pull-left">后天</div><div class="pull-left whether-logo"><div><img src="../../dist/img/cloudy.png" alt="" /></div></div><div class="pull-left weather-infor"><div>21 ~ 15 ℃</div><div>1.01325 bar</div></div></li><li class="weather-box-li"><div class="whether-time pull-left">7/8日</div><div class="pull-left whether-logo"><div><img src="../../dist/img/rain.png" alt="" /></div></div><div class="pull-left weather-infor"><div>21 ~ 15 ℃</div><div>1.01325 bar</div></div></li><li class="weather-box-li"><div class="whether-time pull-left">7/9日</div><div class="pull-left whether-logo"><div><img src="../../dist/img/snow.png" alt="" /></div></div><div class="pull-left weather-infor"><div>21 ~ 15 ℃</div><div>1.01325 bar</div></div></li><li class="weather-box-li"><div class="whether-time pull-left">7/10日</div><div class="pull-left whether-logo"><div><img src="../../dist/img/rain.png" alt="" /></div></div><div class="pull-left weather-infor"><div>21 ~ 15 ℃</div><div>1.01325 bar</div></div></li></ul></div>
.weather-box{border:1px solid #5575a7;margin-bottom:10px;height:66px;overflow:hidden;}
.weather-box-li{background:#485973;border-right:1px solid #5575a7;padding:0;}
.weather-box-li:nth-child(3n){}
.weather-ul li { float:left; width:33%; background:#485973;border-right:1px solid #5575a7;}
.weather-ul li:nth-child(2) {width:34%;}
.whether-time{color:#fff;font-size:25px;height:66px;line-height:66px;margin-right:15px;margin-left:15px;}
.whether-logo{margin-right:15px;}
.whether-logo>div{height:66px;display:table-cell;vertical-align:middle;}
.whether-logo img{width:55px;}
.weather-infor{color:#00ffff;font-size:22px;}
 <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script><script src="../../dist/js/jquery.SuperSlide.js"></script><script type="text/javascript">jQuery(".weather-box").slide( {mainCell:".weather-ul",effect:"leftLoop",vis:3,scroll:1,autoPlay:true} );</script>

注意:.weather-box-li 不能设置padding值,会导致滚动异常。

此插件也支持表格向上不停滚动,但是需要把表格放到li里面

<div class="outscrolldiv" style="height:300px;overflow:hidden;border-bottom:1px solid #ccc;"><ul class="shuchaguanliTab list-unstyled"><li><table class="table table-bordered table-striped  "><tbody><tr><td id="title1"><span class="badge bg-primary">1</span></td><th id="title2">行业名称1</th><td id="title3">昆山</td><td id="title4">50</td><td id="title5">20</td><td id="title6">30</td></tr><tr><td><span class="badge bg-primary">2</span></td><th>行业名称1行业名称1行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">3</span></td><th>行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">4</span></td><th>行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">5</span></td><th>行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">6</span></td><th>行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">7</span></td><th>行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">8</span></td><th>行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">9</span></td><th>行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">10</span></td><th>行业名称1</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">1</span></td><th>行业名称2</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">2</span></td><th>行业名称2</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">3</span></td><th>行业名称2</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">4</span></td><th>行业名称2</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr><tr><td><span class="badge bg-primary">5</span></td><th>行业名称2</th><td>昆山</td><td>50</td><td>20</td><td>30</td></tr></tbody></table></li></ul>
</div>
jQuery(".outscrolldiv").slide({ mainCell: ".shuchaguanliTab", effect: "topMarquee", vis: 1, interTime: 40, autoPlay: true });

 

转载于:https://my.oschina.net/u/2612473/blog/1818566

http://www.lryc.cn/news/2412473.html

相关文章:

  • 各资源下载地址整理
  • 12306订票候补是个坑_官方出手了!12306屏蔽多个抢票软件
  • Nodejs使用nodemailer发邮件
  • 小龙女彤彤为何能红
  • python02
  • 日志规范多重要,这篇文章告诉你!
  • 不要轻易和少妇上床:危机是怎样产生的
  • DM7.0在VM-中标麒麟NeoKylin虚拟机上安装
  • 视频教程-Vue 2.x全家桶(Vue 3.0 新特性全解析)-Vue
  • 学生住宿管理系统
  • 移动端页面px布局适配方案(viewport)
  • 动力下肢矫形器和外骨骼辅助策略综述
  • 优思学院:六西格玛证书有用吗?有什么方法获取六西格玛证书?
  • Python运维常用的20个库和模块
  • CentOS下torque集群配置(一)-torque安装与配置
  • c语言 试题总结
  • 实验室设备管理系统SQL代码
  • 《使命召唤》启动失败:该如何修复d3dx9_34.dll错误?
  • d3dcompiler_42.dll系统文件丢失怎么办?
  • Flink——Flink的基础知识
  • 秒懂所有USB接口类型,USB接口大全;Type-A、Type-B、Type-C、miniUSB、microUSB区分
  • GIT使用文档
  • ANR系列之一:ANR显示和日志生成原理讲解
  • 《树莓派实战秘籍》——2.4 技巧24在GPU和Linux用户之间划分内存
  • c/s和b/s的区别与联系
  • P3机器学习笔记--李宏毅
  • release版本是什么意思_史上讲解最详细:版本号命名的前世今生(SpringCloud版本原来是这么回事-值得收藏 - 299...
  • QR码国家标准(图片和表格后续会更新)
  • MOV指令
  • AppbarLayout的简单用法