2019-04-12定时器使用，使图片上下移动
2019-04-17 本文已影响0人
果冻_4c9b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
font-size: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#box {
width: 100px;
border: #636363 10px solid;
height: 340px;
overflow: hidden;
margin: 20px auto;
position: relative;
}
p {
margin: 0;
cursor: pointer;
}
.top {
width: 100%;
height: 20px;
background: #000000;
opacity: 0.5;
position: absolute;
top: 0;
color: #FFFFFF;
text-align: center;
font-size: 14px;
font-weight: bold;
}
.bottom {
width: 100%;
height: 20px;
background: #000000;
opacity: 0.5;
position: absolute;
bottom: 0;
color: #FFFFFF;
text-align: center;
font-size: 14px;
font-weight: bold;
}
#box ul {
position: absolute;
top: 20px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>a <a href=""><img src="img/练习1/1.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/2.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/3.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/4.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/5.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/6.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/7.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/8.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/9.jpg"></a></li>
<li>a <a href=""><img src="img/练习1/9.jpg"></a></li>
</ul>
<p class="top">↑</p>
<p class="bottom">↓</p>
</div>
<script type="text/javascript">
var oTop = document.getElementsByTagName('p')[0];
var oBottom = document.getElementsByTagName('p')[1];
var oUl = document.getElementsByTagName('ul')[0];
// 获得标签的属性
function getStyle(obj, attr) {
return getComputedStyle(obj)[attr];
}
var timer = null;
var timer1 = null;
// 按下定时器使图片改变top值向上移动
oTop.onmousedown = function() {
timer = setInterval(function() {
if (parseInt(getStyle(oUl, 'top')) <= -180) {
oUl.style.top = '-180px';
clearInterval(timer);
return;
}
oUl.style.top = parseInt(getStyle(oUl, 'top')) - 10 + 'px';
}, 50)
}
// 下移
oBottom.onmousedown = function() {
timer = setInterval(function() {
if (parseInt(getStyle(oUl, 'top')) >=20 ) {
oUl.style.top = '20px';
clearInterval(timer);
return;
}
oUl.style.top = parseInt(getStyle(oUl, 'top')) + 20 + 'px';
}, 50)
}
</script>
</body>
</html>
