百叶窗

最新推荐文章于 2022-12-15 10:29:41 发布

LW0512

最新推荐文章于 2022-12-15 10:29:41 发布

阅读量171

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/LW0512/article/details/108910350

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

百叶窗

效果图

在这里插入图片描述

具体代码如下：

<!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=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>

LW0512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百叶窗

百叶窗效果图具体代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ margin: 0 auto; display: block; }
复制链接

扫一扫