点击鼠标上下滚动
<!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]; }// 設(shè)置向上按鈕按下的動作
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)
}
// 設(shè)置向上按鈕抬起的動作oBtn1.onmouseup = function(){clearInterval(timerUp)}
// 設(shè)置按鈕按下的動作
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);
}
// 設(shè)置向下按鈕抬起的動作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>
轉(zhuǎn)載于:https://www.cnblogs.com/zhangli1021/p/8135021.html
總結(jié)
- 上一篇： 持续集成之 Jenkins 的安装与配置
- 下一篇： 人民日报“权威认证”吃鸡装备哪家强，不服