<!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; 200px; position:relative; top:40px; }
.img {height: 100px; 200px; border-bottom:1px solid #ccc; }
.img img{ height: 100px; 200px; }
input{ 200px; height: 40px; }
#btn1{ top: 0;position: absolute;z-index: 10000 }
#btn2{ bottom:0px;position: absolute;z-index: 10000 }
#aa{ 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>
