滚动的展示表格

想实现类似jquery的sliderUp的功能

先说滚动的思路

function slideUp(element, time) {
    // 获取元素总高度
    let totalHeight = element.offsetHeight;
    // 定义一个变量保存元素当前高度
    let currentHeight = totalHeight;
    // 计算每次减去的值
    let decrement = totalHeight/ (time/10);
    // 开始循环定时器
    let timer = setInterval(function() {
        // 减去当前高度的一部分
        currentHeight = currentHeight - decrement;
        // 把当前高度赋值给height属性
        element.style.setProperty('height',`${currentHeight}px`)
        // 如果当前高度小于等于0,就关闭定时器
        if (currentHeight <= 0) {
            // 关闭定时器
            clearInterval(timer);
            // 把元素删掉
            element.parentNode.removeChild(element)
        }
    }, 10)
}

参考自一个大神,出处忘了,有发现出处的同学记得联系我注明出处

用table布局

一开始表格的布局想用table,但是出现各种问题,问题如下:
在将tr作为上升的元素时,由于内部文字的存在,无法上升完全
将tr内的td作为上升元素时,也是同样的问题,而且由于table的自适应问题,导致元素上升时,表格内其他部分也在不断上升以自适应
总之不能用table

用div布局表格

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 4,263评论 2 5
  • 表格 在HTML中,使用table标签来创建一个表格 在table标签中使用tr来表示表格中的一行,有几行就有几对...
    949d30a09ba7阅读 76评论 0 0
  • 会涉及关于表格、表单、列表的讲解表格:显示数据表单:获取用户数据列表:控制布局 一、表格 主要用于数据展示 1.1...
    Threejs开发者阅读 398评论 0 1
  • 表格 在HTML中,使用table标签来创建一个表格 在table标签中使用tr来表示表格中的一行,有几行就有几对...
    任世间慌张_6184阅读 306评论 0 0
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,612评论 0 11