<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #box{z-index: 10; width: 200px; position:relative; top:40px; } .img {height: 100px; width: 200px; border-bottom:1px solid #ccc; } .img img{ height: 100px; width: 200px; } input{ width: 200px; height: 40px; } #btn1{ top: 0;position: absolute;z-index: 10000 } #btn2{ bottom:0px;position: absolute;z-index: 10000 } #aa{ width: 200px; height: 280px;position:relative;overflow: hidden;} </style> </head> <script> window.onload = function(){ var oBtn1 = document.getElementById(‘btn1‘) var oBtn2 = document.getElementById(‘btn2‘) var oBox = document.getElementById(‘box‘) var timerUp = null; var timerDown = null; function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } // 设置向上按钮按下的动作 oBtn1.onmousedown = function(){ timerUp = setInterval(function(){ if (parseInt(getStyle(oBox , ‘top‘)) > - 165) { oBox.style.top = parseInt(getStyle(oBox,‘top‘)) - 5 +‘px‘ } else { oBox.style.top = ‘-165px‘ } },100) } // 设置向上按钮抬起的动作 oBtn1.onmouseup = function(){ clearInterval(timerUp) } // 设置按钮按下的动作 oBtn2.onmousedown = function(){ timerDown = setInterval(function(){ if (parseInt(getStyle(oBox , ‘top‘)) < 40) { oBox.style.top = parseInt(getStyle(oBox , ‘top‘)) + 5 +‘px‘; } else { oBox.style.top = ‘40px‘; } },100); } // 设置向下按钮抬起的动作 oBtn2.onmouseup = function(){ clearInterval(timerDown) } } </script> <body> <div id="aa"> <input id="btn1" type="button" value="上按钮" /> <div id="box"> <div class="img"><img src="img/1.png"></div> <div class="img"><img src="img/2.png"></div> <div class="img"><img src="img/3.png"></div> <div class="img"><img src="img/4.png"></div> </div> <input id="btn2" type="button" value="下按钮" /> </div> </body> </html>
