原生js实现表格循环滚动


Posted in Javascript onNovember 24, 2020

本文实例为大家分享了js实现表格循环滚动的具体代码,供大家参考,具体内容如下

css

table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
th,td{line-height: 35px;border: 1px solid gray;text-align: center;width: 120px;}
.scroll-box{height: 280px;width: 500px;overflow: hidden;position: relative;}
.tab-scroll{position: absolute;left: 0;top: 0;border-top: none;}
.tab-scroll td{border-top: none;}

html布局

<table class="top">
 <thead>
 <tr>
 <th>ID</th>
 <th>姓名</th>
 <th>年龄</th>
 <th>住址</th>
 </tr>
 </thead>
 </table>
 <div class="scroll-box">
 <table class="tab-scroll">
 <tbody>
 <tr>
 <td>1001</td>
 <td>李四</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1002</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1003</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1004</td>
 <td>Jack</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1005</td>
 <td>小兰</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1006</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1007</td>
 <td>王五</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1008</td>
 <td>Jack</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 <tr>
 <td>1009</td>
 <td>小兰</td>
 <td>AAAA</td>
 <td>AAAA</td>
 </tr>
 </tbody>
 </table>
</div>

js代码

var sTab = document.getElementsByClassName('tab-scroll')[0];//要滚动的表
 var tbody = sTab.getElementsByTagName('tbody')[0];//要滚动表格的内容
 sTab.appendChild(tbody.cloneNode(true));//追加一次滚动内容,以防滚动后可视区域无内容
 var speed = sTab.getElementsByTagName('td')[0].offsetHeight+3;//每次滚动的距离
 var tbdh = tbody.offsetHeight+1;//整个表的高度,是因为上边的边不算滚动
 
 function scrollTop() {
 var t = sTab.offsetTop;//获取要滚动表的位置
 if (-tbdh == t) {//比较 滚动的距离等于整个表的高度 即第一个表完全看不见
 sTab.style.transition = '0s';//过渡动画设为0秒
 sTab.style.top = 0;//位置设为初始位置
 scrollTop();//因为偷梁换柱消耗了一次过程,所以把这一次过程补回来
 }else{
 sTab.style.transition = '1s';
 sTab.style.top = t - speed + 'px';
 }
 }
setInterval(scrollTop, 1000);

解析思路图

原生js实现表格循环滚动

然后滚动....

原生js实现表格循环滚动

 偷偷改到初始的位置(也就是:不用过渡动画把top改为0,改后恢复正常过渡动画滚动)

原生js实现表格循环滚动

一些轮播图也可以用这个思路(我才不会告诉你,,其实这个思路就是从轮播图得来的),想看轮播图思路的把上面思路图转动90°就OK了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue.js实现回到顶部动画效果
Jul 31 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Js利用正则表达式去除字符串的中括号
Nov 23 #Javascript
jQuery实现动态操作table行
Nov 23 #jQuery
JavaScript前后端JSON使用方法教程
Nov 23 #Javascript
微信小程序实现简单的select下拉框
Nov 23 #Javascript
记录一次websocket封装的过程
Nov 23 #Javascript
You might like
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
php实现登录页面的简单实例
2019/09/29 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
React简单介绍
2017/05/24 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python去除字符串两端空格的方法
2015/05/21 Python
python3中int(整型)的使用教程
2017/03/23 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
mysql有关权限的表都有哪几个
2015/04/22 面试题
汽车转让协议书
2015/01/29 职场文书
博士导师推荐信
2015/03/25 职场文书
人事聘任通知
2015/04/21 职场文书
警告通知
2015/04/25 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
八年级语文教学反思
2016/03/03 职场文书