前两天学习了定时器,为了更好地理解,做了几个关于它的小练习。这个练习本来觉得很容易,但是花的调试时间最久,主要的问题就出在高度值的获取上,还有滚动对象的确定。我是利用top值的变化来实现滚动的功能,向上滚动top减小,向下滚动top值增加。获取页面当前的top值通过封装函数实现:
实现top值的变化是通过定时器,定时器所需函数主要是实现相同时间间隔内top变化固定的值:
需要注意的是z-index和overflow的正确运用
实现效果:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>按钮控制菜单的上下滚动</title> <style type="text/css"> #contain{ width: 300px; height: 500px; margin: 0 auto; position: relative; overflow: hidden; } .head{ width: 280px; height: 30px; line-height: 30px; padding:0 10px; background: blue; border-radius: 10px 10px 0 0; z-index: 10; } #up,#down{ width: 300px; height: 30px; background: #617786; text-align: center; line-height: 30px; position: absolute; cursor: pointer; z-index: 2; } #up{ top: 30px; z-index: 10; } #down{ top: 470px; } #content{ height: 410px; position: absolute; top: 60px; z-index: -1; } #content ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; z-index: -1; } #content ul li{ width: 300px; height: 60px; background: #99a7ce; overflow: hidden; border-bottom: 1px solid #ccc; color: white; text-align: center; line-height: 60px; font-size: 20px; } </style> </head> <body> <div id="contain"> <div class="head">妙味课堂</div> <div id="up">向上滚动</div> <div id="content"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div id="down">向下滚动</div> </div> <script type="text/javascript"> var cont=document.getElementById('content'); var up=document.getElementById('up'); var down=document.getElementById('down'); var oUl=cont.getElementsByTagName('ul'); var timer1=null,timer2=null; up.onmousedown=function(){ clearInterval(timer1); if(parseInt(getStyle(cont,'top'))>-140) timer1=setInterval(function(){ var dis=parseInt(getStyle(cont,'top'))-1; if(dis<=-140){ clearInterval(timer1); } cont.style.top=dis+'px'; },10); } up.onmouseup=function(){ clearInterval(timer1); } down.onmousedown=function(){ clearInterval(timer1); clearInterval(timer2); if(parseInt(getStyle(cont,'top'))<60) timer2=setInterval(function(){ var dis=parseInt(getStyle(cont,'top'))+1; if(dis>=60){ clearInterval(timer2); } cont.style.top=dis+'px'; },10); } down.onmouseup=function(){ clearInterval(timer2); } function getStyle(obj ,attr){ return obj.currentStyle ? obj.currentStyle[attr] :getComputedStyle(obj ,false)[attr]; } </script> </body> </html>