<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>zhouxuanmsn@hotmail.com</title>
</head>
<body>
<div id="demo" style="overflow:hidden;height:300;99%;">
<div id="demo1">
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
<img src="images/02.gif"><br>
</div>
<div id="demo2"></div>
</div>
<p>
<script language="javascript">
var speed=30;
var TopMyMar;
var DownMyMar
function MarqueeTop()
{
clearInterval(DownMyMar)
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else
demo.scrollTop++;
}
TopMyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(TopMyMar)}
demo.onmouseout=function() {TopMyMar=setInterval(Marquee,speed)}
}
MarqueeTop();
function MarqueeDown()
{
clearInterval(TopMyMar)
demo2.innerHTML=demo1.innerHTML //复制层的内容
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
DownMyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(DownMyMar)}
demo.onmouseout=function() {DownMyMar=setInterval(Marquee,speed)}
}
</script>
<a href="#" onClick="MarqueeTop()">向上</a> <a href="#" onClick="MarqueeDown()">向下</a>
</body>
</html>