jq实现表格轮播滚动——技能提升

ゞ浴缸里的玫瑰 2022-09-08 03:48 290阅读 0赞

今天在做电视机的项目，除了单位要转为自适应的`rem`之外，还有一个点就是表格要实现轮播。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
效果图如上，表格中是一条条的数据，需要实现表格中的数据向上滚动，每次滚动的就是一行数据的高度。

我的`jq`技能几乎忘光了，下面附录同事的代码：

setInterval(timerFn,3000);
    function timerFn() { 
        var scrollHeight = $(".order-table").find("tr").outerHeight();
        $(".order-table").animate({ 
                marginTop: -scrollHeight,
            },
            500,
            function() { 
                $(this)
                    .css({ 
                        marginTop: "0px",
                    })
                    .find("tr:first")
                    .appendTo(this);
            }
        );
    }

上面代码中的`order-table`就是表格外层的`div`的`class`名称，可以拿到这个表格中的`tr`的高度，也就是上面代码中的`outerHeight()`，这个就是要滚动的距离，然后给表格添加一个`animate`动画。  
`animate`的动画有三个参数，第一个参数就是要变化的参数及数值，第二个参数是动画的时间，第三个参数是动画结束时的回调函数。

变化的量就是：`marginTop`，变化的数值是当前表格中第一个`tr`的高度。动画的时间可以设置为500，回调函数这个地方需要注意下：为了保证表格不间断，动画完的`tr`要放到表格的最下方，也就是:`appendTo`，最后保证表格能够持续轮播。

完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/1fde7e5c9e2342399c22a0f9571f01d0.png