原生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的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
vue axios请求成功却进入catch的原因分析
Sep 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
python 把列表转化为字符串的方法
2018/10/23 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python面试题小结附答案实例代码
2019/04/11 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
计算机专业毕业生自我鉴定
2014/01/16 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
四风对照检查材料范文
2014/09/27 职场文书
大学生助学金感谢信
2015/01/21 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技