js上下滾動表格

<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; //滾動的速度
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章