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();