用JS实现Marquee不能实现的连续不间断滚动效果
在Html里，用Marquee实现的滚动特效，在一轮滚动完成后，总是出现一段空白的时间，效果不好。而下面用JS实现的这个特效就不会出现这种情况：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用JS实现Marquee不能实现的连续不间断滚动效果</title>
</head>
<body>
<div id="demo" style="overflow: hidden; width: 160px; color: #ffffff; height: 120px">
<table align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="demo1" valign="top">
<table width="160" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网1</a>
</td>
</tr>
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网2</a>
</td>
</tr>
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网3</a>
</td>
</tr>
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网4</a>
</td>
</tr>
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网5</a>
</td>
</tr>
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网6</a>
</td>
</tr>
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网7</a>
</td>
</tr>
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网8</a>
</td>
</tr>
<tr>
<td width="24">
<center>
<span class="dot">·</span>
</center>
</td>
<td width="136" height="24">
<a href='http://www.gotaspx.com' target="_blank">VS2005专业教程网9</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="demo2" valign="top">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed=18
demo2.innerHTML=demo1.innerHTML
function Marquee() {
if(demo2.offsetHeight-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else { demo.scrollTop++ }
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() { clearInterval(MyMar) }
demo.onmouseout=function() { MyMar=setInterval(Marquee,speed) }
</script>
</body>
</html>
