<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> 滚动</title>
<script type="text/javascript">
var boo = true;
window.onload = function(){
var speed =30;//滚动速度
demo2.innerHTML = demo1.innerHTML;
demo3.innerHTML = demo1.innerHTML;
demo.scrollTop = demo1.offsetTop;
function Marquee(){
if(boo==true){
if(demo2.offsetTop - demo.scrollTop <= 0)
demo.scrollTop -= demo1.offsetHeight;
else{
demo.scrollTop += 2;
}
}else{
if(demo3.offsetTop - demo.scrollTop >= 0)
demo.scrollTop += demo1.offsetHeight;
else{
demo.scrollTop -= 2;
}
}
}
var MyMar = setInterval(Marquee,speed);
demo.onmouseover = function() {
clearInterval(MyMar);
}
demo.onmouseout = function() {
MyMar = setInterval(Marquee,speed);
}
}
function down(){
boo=true;
}
function up(){
boo=false;
}
</script>
</head>
<body
<div style="position:relative;left:200px;top:100px;width:220px;">
<div style="text-align:center">
<a id="up" href="javascript:void(0)" onclick="up()">向上滚动</a>
</div>
<div id="demo" style="width:220px;overflow: hidden; height: 250px;border:1px solid red;">
<div id="demo3">
</div>
<div id="demo1">
<img src="images/01.jpg"/><br/>
<img src="images/02.jpg"/><br/>
<img src="images/03.jpg"/><br/>
</div>
<div id="demo2">
</div>
</div>
<div style="text-align:center">
<a id="down" href="javascript:void(0)" onclick="down()">向下滚动</a>
</div>
</div>
</body>
</html>
转载于:https://my.oschina.net/jiangli0502/blog/159637