首页 > 代码库 > Day4-----rollVertical
Day4-----rollVertical
//-----------------------不同的是使用了offsetTop和offsetHeight完成竖着的无缝图片滚动
<html><head><title>rollVertical</title></head><style type="text/css"> body,img,li,div,ul{margin: 0px;padding: 0px;} img{width: 130px;height: 150px;} #upBtn{width: 40px;height: 40px;margin-top: 5px;margin-bottom: 5px;} #downBtn{width: 40px;height: 40px;top: 490px;position: relative;} li{list-style: none;float: left;margin: 10px 10px 0px 10px;} #board{height: 480px;position: absolute;width: 150px;overflow: hidden;} #picBody{position: absolute;} #box{width: 150px;height: 590px;background: pink;margin: 20px auto;text-align: center;}</style><script type="text/javascript"> window.onload=function(){ var timer; oPicBody=document.getElementById(‘picBody‘); oBtn=document.getElementsByTagName(‘input‘); oImg=document.getElementsByTagName(‘img‘); oPicBody.innerHTML+=oPicBody.innerHTML; oPicBody.style.height=(oImg[0].offsetHeight+10)*oImg.length+‘px‘; oBtn[0].onmouseover=function(){ timer=setInterval(function(){ oPicBody.style.top=(oPicBody.offsetTop-5)+‘px‘; if(oPicBody.offsetTop<(-oPicBody.offsetHeight/2)) oPicBody.style.top=0+‘px‘; },30) } oBtn[0].onmouseout=oBtn[1].onmouseout=function(){ clearInterval(timer); } oBtn[1].onmouseover=function(){ timer=setInterval(function(){ oPicBody.style.top=(oPicBody.offsetTop+5)+‘px‘; if(oPicBody.offsetTop>0) oPicBody.style.top=-oPicBody.offsetHeight/2+‘px‘; },30) } }</script><body> <div id="box"> <input type="image" src="http://www.mamicode.com/pic/rollUp.png" id="upBtn"> <div id="board"> <ul id="picBody"> <li><img src="http://www.mamicode.com/pic/pic1.jpg"></li> <li><img src="http://www.mamicode.com/pic/pic2.jpg"></li> <li><img src="http://www.mamicode.com/pic/pic3.jpg"></li> <li><img src="http://www.mamicode.com/pic/pic4.jpg"></li> </ul> </div> <div></div> <input type="image" src="http://www.mamicode.com/pic/rollDown.png" id="downBtn"> </div></body></html>
Day4-----rollVertical
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。