首页 >> js开发 >> JavaScript原生js实现表格循环滚动
JavaScript原生js实现表格循环滚动
发布时间: 2021年1月13日 | 浏览:
| 分类: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;}
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布局
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);
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);解析思路图然后滚动.... 偷偷改到初始的位置(也就是:不用过渡动画把top改为0,改后恢复正常过渡动画滚动)一些轮播图也可以用这个思路(我才不会告诉你,,其实这个思路就是从轮播图得来的),想看轮播图思路的把上面思路图转动90°就OK了轮播图思路思路图转动90°以上就是本文的全部内容,希望对大家的学习有所帮助。
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;}
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 |
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 |
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);
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);解析思路图然后滚动.... 偷偷改到初始的位置(也就是:不用过渡动画把top改为0,改后恢复正常过渡动画滚动)一些轮播图也可以用这个思路(我才不会告诉你,,其实这个思路就是从轮播图得来的),想看轮播图思路的把上面思路图转动90°就OK了轮播图思路思路图转动90°以上就是本文的全部内容,希望对大家的学习有所帮助。