锐客网

  1. 首页 > it技术 > >

原生js实现表格循环滚动

本文实例为大家分享了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布局
ID 姓名 年龄 住址
1001 李四 AAAA AAAA
1002 王五 AAAA AAAA
1003 王五 AAAA AAAA
1004 Jack AAAA AAAA
1005 小兰 AAAA AAAA
1006 王五 AAAA AAAA
1007 王五 AAAA AAAA
1008 Jack AAAA AAAA
1009 小兰 AAAA AAAA

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了
【原生js实现表格循环滚动】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：使用Springboot注解形式进行模糊查询

    下一篇：Java不借助第三变量实现两数交换的示例