js实现table数据不断滚动

最新推荐文章于 2024-09-16 08:00:00 发布

zyj12138

最新推荐文章于 2024-09-16 08:00:00 发布

阅读量2.1k

点赞数

分类专栏： react js 文章标签： js

本文链接：https://blog.csdn.net/zyj12138/article/details/103472560

版权

本文介绍了一种使用JavaScript实现表格数据滚动的方法，通过创建两个相同的表格并利用CSS定位，结合状态变量和定时器来实现类似轮播图的效果。在实现过程中，作者解决了单位转换和比较的问题，确保了滚动的平滑进行。

摘要由CSDN通过智能技术生成

上一次的项目没想出来，这一次，我想出来了！而且十分容易理解，就是有点麻烦，日后会想更简便的方法：
首先获取table的dom：

    var table1 = document.getElementsByClassName('tableContent')[0];
    var table2 = document.getElementsByClassName('tableContent')[1];

这里为什么是2个table呢，其实就是轮播图原理，我是再table整个基础上实现的滚动，不是在td上实现的，所以本来是一个table的我写了2个相同的table
然后设置外面包裹table的div为relative，内部table都设置为absolute;
然后获取第一个table的高度；设置第二个table的style的top为这个高度，因为我的项目中的高度是根据屏幕比例变化的，所以是动态的高度。