js 百叶窗
程序员文章站
2022-03-11 18:13:34
...
百叶窗
具体代码
!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;
//让所有的div通过循环平铺盖住图片
for(var i=0; i<odiv.length; i++){
odiv[i].style.top=n+'px';
//1 i=0 odiv[0].style.top=0;
//2 i=1 odiv[1].style.top=70;
//3 i=2 odiv[2].style.top=140;
n=n+70;
}
document.onclick=function(){
var m=170;
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>
效果图
上一篇： PHP 应用程序的性能优化_PHP
下一篇： 利用html实现进度条效果的方法