原生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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
浅析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
php escape URL编码
2008/12/10 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
CCPry JS类库 代码
2009/10/30 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
分分钟入门python语言
2018/03/20 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Python Map 函数的使用
2020/08/28 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
成品仓管员工作职责
2013/12/29 职场文书
运动会入场解说词
2014/02/07 职场文书
化学教学随笔感言
2014/02/19 职场文书
七匹狼男装广告词
2014/03/21 职场文书
班主任自我评价范文
2015/03/11 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript