原生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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
JS的数组迭代方法
Feb 05 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
JavaScript常见JSON操作实例分析
Aug 08 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php实现复制移动文件的方法
2015/07/29 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
JS中常用的消息框总结
2018/02/24 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
详解Django中的过滤器
2015/07/16 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
pandas的qcut()方法详解
2019/07/06 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
综合内勤岗位职责
2014/04/14 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
售后服务承诺函格式
2015/01/21 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android