美文网首页
滚动的展示表格

滚动的展示表格

作者: 小白的踩坑日常 | 来源:发表于2021-03-18 16:07 被阅读0次

    想实现类似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布局表格

    相关文章

      网友评论

          本文标题:滚动的展示表格

          本文链接:https://www.haomeiwen.com/subject/ssqpcltx.html