原生js簡單實現App Store 卡片展開效果

阿新 • • 發佈：2021-01-16

先看效果

在這裡插入圖片描述

由於程式碼很簡單就不進行說明了程式碼在下面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<style 
 type="text/css">
		html,body{
			margin: 0;
			padding: 0;
			border: 0;
		}
		body{
			display: flex;
			flex-wrap: wrap;
			background-color: rgb(233, 233, 233);
			flex-direction: column;
			align-items: center;
		}
		.itemBox{
			width: 300px;
			height: 230px;
			overflow: hidden;
			background-color 
: white;
			margin-bottom: 20px;
			border-radius: 30px;
			transition: all 0.5s ease-in-out;
			box-shadow: 0px 0px 5px 4px #cccccc;
		}
		.itemBox img{
			width: 100%;
		}
		.title{
			font-size: 20px;
			padding: 0 20px;
		}
		.zk{
			width: 100%;
			height: 100vh;
			border-radius: 0px;
		}
		.zk p{
			padding 
: 10px;
		}
		
	</style>
</head>
<body>
	<div class="itemBox">
		<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3760447650,2131348306&fm=26&gp=0.jpg"/>
		<p class="title">Hello World</h4>
		<p>
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
		</p>
	</div>
	<div class="itemBox">
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=167741595,2706197548&fm=26&gp=0.jpg"/>
		<p class="title">Hello World</h4>
		<p>
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
		</p>
	</div>
	<div class="itemBox">
		<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1456311713,793392047&fm=26&gp=0.jpg"/>
		<p class="title">Hello World</h4>
		<p>
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
		</p>
	</div>
	<div class="itemBox">
		<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2353240686,3018512300&fm=26&gp=0.jpg"/>
		<p class="title">Hello World</h4>
		<p>
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
		</p>
	</div>
	<div class="itemBox">
		<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3316315154,280153782&fm=26&gp=0.jpg"/>
		<p class="title">Hello World</h4>
		<p>
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
			hello world hello world hello world hello world hello world hello world hello world hello world
		</p>
	</div>
	<script>
		//獲取每一個選單
		const itemBox = Array.from(document.getElementsByClassName('itemBox'));
		const body = document.querySelector('body')
		//給每一個選單加上點選事件
		itemBox.forEach(r=>{
			r.addEventListener('click',function(e){
				//獲取body滾動高度
				const height = body.scrollHeight
				//切換選單展開和收起狀態
				r.classList.toggle('zk')
				//判斷選單是否展開
				if(r.classList.contains('zk')){
					//給body加上一個螢幕的高度
					body.style.height = height + window.screen.height+'px'
					//固定滾動條
					body.style.overflow = 'hidden'
				}else{
					//移除增加的高度
					body.style.height = 'auto'
					body.style.overflow = 'auto'
				}
				window.scrollTo({ top: this.offsetTop, behavior: "smooth" })
				
			},true)
		})
	</script>
</body>
</html>