运用原生JS怎样做表格循环滚动的效果？
发布时间：2022-01-20 15:52:28 所属栏目：语言 来源：互联网
导读：今天给大家分享使用原生JS做表格循环滚动的效果，下文的表格循环滚动思路来做轮播图，对轮播图也感兴趣的朋友，不妨了解看看本文的示例，接下来我们一起看看吧。 css table{width: 500px;border: 1px solid gray;border-collapse: collapse;} th,td{line-hei
|
今天给大家分享使用原生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); （编辑：青岛站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
