<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.onmouseover=function() {clearInterval(MyMarhq)}
demohq.onmouseout=function() {MyMarhq=setInterval(Marqueehq,speedhq)}
</script></body></html>
幾點說明
1、需要兩個一樣的table表格,主要是高度一樣
當表格滾動時,部分隱常時,另外一個表格數據替換之。這就要求兩個表格高度之和應該大於顯示區域之和。
2、定時函數不斷地讓表格向上滾動
var speedhq = 60; //滾動的速度