- 科技
- 百叶窗
百叶窗
效果图
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
margin: 0 auto;
display: block;
}
div{
width: 100%;
height: 70px;
background: red;
color: #fff;
text-align: center;
font-size: 50px;
position: absolute;
}
</style>
</head>
<body>
<img src="img/timg.jpg"/>
<div>1
</div>
<div>2
</div>
<div>3
</div>
<div>4
</div>
<div>5
</div>
<div>6
</div>
<div>7
</div>
<div>8
</div>
</body>
<script type="text/javascript">
var odiv=document.getElementsByTagName('div');
var n=0;
var timer;
for(var i=0; i<odiv.length; i++){
odiv[i].style.top=n+'px';
n=n+70;
}
document.onclick=function(){
var m=70;
function fun(){
m--;
if(m<0){
clearInterval(timer)
}else{
for(var j=0; j<odiv.length; j++){
odiv[j].style.height=m+'px';
}
}
}
fun();
timer=setInterval(fun,100)
}
</script>
</html>
Processed:
0.012, SQL:
8
