一行一行向上循环滚动
表格向上循环滚动：
css:
.table{
width: 100%;
left:30%;
border-collapse:collapse;
border-spacing:0;
}
.fixedThead{
display: block;
width: 100%;
}
.scrollTbody{
display: block;
overflow: hidden;
width: 100%;
}
.table td {
width: 138px;
padding: 6px 0;
background-color:#fff;
}
.table th {
width: 134px;
padding: 7px 0;
line-height:24px;
background-color:#da251c;
color: #fff;
}
.myscroll{
width: 457px;
height: 400px;
overflow: hidden;
}
.myscroll li {
height: 26px;
margin-left: 25px;
}
html:
<table class="table" align="center">
<thead
class="fixedThead" align="center">
<tr>
<th>时间</th>
<th>代码</th>
<th>名称</th>
<th>持股时间（天）</th>
<th>涨幅</th>
</tr>
</thead>
<tbody id="test"
class="scrollTbody" align="center">
<tr>
<td>10月19号</td>
<td>002180</td>
<td>纳思达</td>
<td>5天</td>
<td>12.5%</td>
</tr>
<tr>
<td>10月10日</td>
<td>601116</td>
<td>三江购物</td>
<td>4天</td>
<td>12.28%</td>
</tr>
<tr>
<td>10月11日</td>
<td>002024</td>
<td>苏宁云商</td>
<td>3天</td>
<td>6.29%</td>
</tr>
<tr>
<td>10月12日</td>
<td>002432</td>
<td>九安医疗</td>
<td>3天</td>
<td>20.3%</td>
</tr>
<tr>
<td>10月13日</td>
<td>603888</td>
<td>新华网</td>
<td> </td>
<td>当天涨停</td>
</tr>
</tbody>
</table>
js:（方法1）
//思路：先在table的最后增加一行，然后再把第一行中的数据填充到新增加的行中，最后再删除table的第一行
function change(table){
var row = table.insertRow(table.rows.length); //在table的最后增加一行,table.rows.length是表格的总行数
for(j=0;j<table.rows[0].cells.length;j++){ //循环第一行的所有单元格的数据，让其加到最后新加的一行数据中（注意下标是从0开始的）
var cell = row.insertCell(j); //给新插入的行中添加单元格
cell.height = "24px"; //一个单元格的高度，跟css样式中的line-height高度一样 注意！！！！
cell.innerHTML = table.rows[0].cells[j].innerHTML; //设置新单元格的内容，这个根据需要，自己设置
}
table.deleteRow(0); //删除table的第一行
};
function tableInterval(){
var table = document.getElementById("test"); //获得表格
change(table); //执行表格change函数，删除第一行，最后增加一行，类似行滚动
};
setInterval("tableInterval()",2000); //每隔2秒执行一次change函数，相当于table在向上滚动一样
js:（方法2）注：跟上面内容不相连
//向上循环滚动
scrollPL();
function scrollPL() {
var i = 1;
var len = $('.plList li').length;
$('.plContent').append($('.plList').clone());
var _table = $('.plList').eq(0); //li
setInterval(function() {
_table.css('marginTop', -81 * i);
i++;
if (i == len + 1) {
setTimeout(function() {
_table.css('transition', 'none');
_table.css('marginTop', 2);
i = 1;
setTimeout(function() {
_table.css('transition', 'all .7s')
}, 700);
}, 1000)
}
}, 3000);
}
--------------------木有啦，结束啦--------------------
