table内的文字上下滚动

<html><head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<style>
.yellow{
color:#FF0;
}
</style>
</head>
<body>

<table align="center" bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="1" width="381">
<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>
</table>

<table align="center" bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="0" width="381">
<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">
<tr bgcolor="#ffffff">
<td class="td1" align="center" height="28" width="47">1</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">2</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">3</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>
</table>
</div>
<!-- demohq1 -->
<div id="demohq2" align="center">
<table border="0" cellpadding="0" cellspacing="1" width="381">
<tr bgcolor="#ffffff">
<td class="td1" align="center" height="28" width="47">4</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">5</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">6</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>
</table>
</div>
<!-- demohq2 -->
</div>
<!-- demohq -->
</td>
</tr>
</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>

原文地址:https://www.cnblogs.com/ll-taj/p/6097811.html