table头部固定，内容滚动，类似新闻一下向上滚动

html:

<div class="ul_box">
    <table class="table1">
        <thead>
            <tr>
                <th>11111111111</th>
                <th>11111111111</th>
                <th>11111111111</th>
                <th>11111111111</th>
            </tr>
        </thead>
    </table>
    <div class="hide">
        <table class="table2">
        <tr>
            <td>唐女士</td>
            <td>137****2580</td>
            <td>诊断：00****</td>
            <td> 结果：<font class="red">持股待涨</font></td>
        </tr>
      <!--  省略下面的..... -->
        </table>
    </div>
</div>

css:

        .hide {
            width: 1030px;
            height: 150px;
            overflow: hidden;
        }
         .table2 {
            position: relative;
            border-top: none;
            border-bottom: none !important;
        }

js:

    var num = 0, timer3;
    function table() {
        timer3 = setInterval(function() {
            // num 每行的高度
            num += 20;
            // if 里面的高度是要减去重复的高度
            if(num == 300) {
                num = 20;
                $('.table2').css('top', 0 + 'px');
            }
            $('.table2').animate({top: -num+'px'}, 500,"linear",function (){});
        }, 1000)
    }
    table();

 

转载于:https://www.cnblogs.com/huahua0825/p/7993068.html