您的位置：首页 > 其它

经典的图片无缝滚动,点击向上向下按钮还可以控制方向

2009-05-23 09:29 661 查看

<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;width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航