游子日月长

笑渐不闻声渐悄,多情却被无情恼!

导航

scrollTop实现图像循环滚动(实例1)

<html>
<head>
<title>scrollTop实现图像循环滚动(实例1)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body{margin:0px 0px 0px 0px}
</style>
</head>
<body>
<div id="container" style="height:75px; width:480px; overflow:hidden ;border:1px red solid;margin-bottom:0px;margin-top:0px">
<div id="banner1" style="height:75px;border:0px blue dotted;margin-bottom:0px;margin-top:0px;">
<div align="center" style="border:0px;margin-bottom:0px;line-height:75px">
<img src="images/001.png" border=0 />
<img src="images/002.gif" border=0 />
<img src="images/003.png" border=0 />
<img src="images/004.png" border=0 />
<img src="images/005.png" border=0 />
<img src="images/006.png" border=0 />
</div>
</div>
<div id="banner2" style="height:75px;border:0px green dotted;margin-bottom:0px;margin-top:0px"></div>
</div>
<script>
var scrollSpeed=50;
banner2.innerHTML=banner1.innerHTML;
function myMarquees(){
//向上循环滚动
if(banner2.offsetTop-container.scrollTop<=0)
{
document.getElementById("showresult").value='banner2.offsetTop='+banner2.offsetTop+" container.scrollTop="+container.scrollTop;
container.scrollTop-=banner1.offsetHeight; //清零,重新开始
}
else{
document.getElementById("showresult").value='banner2.offsetTop='+banner2.offsetTop+" container.scrollTop="+container.scrollTop;
container.scrollTop++; //相当于将demo容器的垂直滚动条滑块向下滚动
}

}
var mqs=setInterval(myMarquees,scrollSpeed)
container.onmouseover=function() { clearInterval(mqs) }
container.onmouseout=function() { mqs=setInterval(myMarquees,scrollSpeed) }

</script>

<textarea id="showresult" style="width:300px"></textarea>

 

</body>
</html>

posted on 2016-11-07 15:07  游子日月长  阅读(294)  评论(0编辑  收藏  举报