滚动Table表格,在很多系统上都会用到,特别是内容需实时显示,但页面篇幅又太小的地方,比如金融网站上的行情显示。
下面是自己仿照网站上做的一个小页面
<html><head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<style>
.yellow{
color:#FF0;
}
</style>
</head>
<body style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">
<table align="center" bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="1" width="381">
<tbody><tr>
<td class="yellow" align="center" bgcolor="#000000" height="21" width="47">合约</td>
<td class="yellow" align="center" bgcolor="#000000" height="21" width="47">开盘价</td>
<td class="yellow" align="center" bgcolor="#000000" height="21" width="47">最高价</td>
<td class="yellow" align="center" bgcolor="#000000" height="21" width="48">最低价</td>
<td class="yellow" align="center" bgcolor="#000000" height="21" width="48">最新价</td>
<td class="yellow" align="center" bgcolor="#000000" height="21" width="48">涨跌</td>
<td class="yellow" align="center" bgcolor="#000000" height="21" width="48">成交量</td>
<td class="yellow" align="center" bgcolor="#000000" height="21" width="48">持仓量</td>
</tr>
</tbody></table>
<table align="center" bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="0" width="381">
<tbody><tr>
<td width="381">
<div id="demohq" width="381" style="overflow:hidden;height:85;">
<div id="demohq1" align="center">
<table border="0" cellpadding="0" cellspacing="1" width="381">
<tbody><tr bgcolor="#ffffff">
<td class="td1" align="center" height="28" width="47">IF1107</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td align="center" height="28" width="48">0</td>
</tr>
<tr bgcolor="#ffffff">
<td class="td1" align="center" height="28" width="47">IF1109</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td align="center" height="28" width="48">54098</td>
</tr>
<tr bgcolor="#ffffff">
<td class="td1" align="center" height="28" width="47">IF1111</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td align="center" height="28" width="48">0</td>
</tr>
</tbody></table></div>
<div id="demohq2" align="center">
<table border="0" cellpadding="0" cellspacing="1" width="381">
<tbody><tr bgcolor="#ffffff">
<td class="td1" align="center" height="28" width="47">IF1107</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td align="center" height="28" width="48">0</td>
</tr>
<tr bgcolor="#ffffff">
<td class="td1" align="center" height="28" width="47">IF1109</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td align="center" height="28" width="48">54098</td>
</tr>
<tr bgcolor="#ffffff">
<td class="td1" align="center" height="28" width="47">IF1111</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="47">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td class="td1" align="center" height="28" width="48">0</td>
<td align="center" height="28" width="48">0</td>
</tr>
</tbody></table></div>
</div>
</td>
</tr>
</tbody></table>
<script>
var speedhq=60;
function Marqueehq(){
if(demohq.scrollTop==demohq1.offsetHeight){
demohq.scrollTop=0;
}else{
demohq.scrollTop++;
}
}
var MyMarhq=setInterval(Marqueehq,speedhq)
demohq.οnmοuseοver=function() {clearInterval(MyMarhq)}
demohq.οnmοuseοut=function() {MyMarhq=setInterval(Marqueehq,speedhq)}
</script></body></html>
几点说明
1、需要两个一样的table表格,主要是高度一样
当表格滚动时,部分隐常时,另外一个表格数据替换之。这就要求两个表格高度之和应该大于显示区域之和。
2、定时函数不断地让表格向上滚动
var speedhq = 60; //滚动的速度
setInterval(Marqueehq,speedhq)
3、正确应用scrollTop,offsetHeight等属性,下面是相关内容的图解
希望对大家有帮助