原生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中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
layui-table对返回的数据进行转变显示的实例
Sep 04 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
编写PHP的安全策略
2006/10/09 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
php中fsockopen用法实例
2015/01/05 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
原生JS实现天气预报
2020/06/16 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python实现12306火车票查询器
2017/04/20 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
Solaris操作系统的线程机制
2012/12/23 面试题
自荐信格式
2013/12/01 职场文书
门卫人员岗位职责
2013/12/24 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
高考备战决心书
2014/03/11 职场文书
销售会计岗位职责
2014/03/15 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
二审代理词范文
2015/05/25 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
2016特色励志班级口号
2015/12/24 职场文书
公历12个月名称的由来
2022/04/12 杂记