html
记得引入style.css和script.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Expanding Cards</title>
</head>
<body>
<div class="container">
<div class="panel active" style="background-image:url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Explore The World</h3>
</div>
<div class="panel" style="background-image:url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>City on winter</h3>
</div>
<div class="panel" style="background-image:url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>City on winter</h3>
</div>
<div class="panel" style="background-image:url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Explore The World</h3>
</div>
<div class="panel" style="background-image:url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>City on winter</h3>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
css
1.设置align-items的时候要设置一下高度height:100vh,否则设置完后不会显示效果。
2.媒体查询(Media queries)非常实用,尤其是当你想要根据设备的大致类型(如打印设备与带屏幕的设备)或者特定的特征和设备参数(例如屏幕分辨率和浏览器视窗宽度)来修改网站或应用程序时。
3.许多媒体功能都是范围功能,这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。例如,仅当您的浏览器的viewport宽度等于或小于 480px 时,此 CSS 才会应用样式
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
display:flex;
align-items:center;
justify-content:center;
height:100vh;
overflow:hidden;
margin:0;
}
.container{
display:flex;
width:90vw;
}
.panel{
background-size: cover;
background-position: center;
background-repeat:no-repeat;
height:80vh;
border-radius:50px;
color:#fff;
cursor:pointer;
flex:0.5;
margin:10px;
position:relative;
transition: flex 0.7s ease-in;
}
.panel h3{
font-size:24px;
position:absolute;
bottom:20px;
left:20px;
margin:0;
opacity:0;
}
.panel.active{
flex:5;
}
.panel.active h3{
opacity:1;
transition:opacity 0.3 ease-in 0.4s;
}
@media(max-width:480px){
.container{
width:100vw;
}
.panel:nth-of-type(4),
.panel:nth-of-type(5){
display: none;
}
}
JavaScript
1.querySelectorAll:
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList ,类似于数组的结构。因为代码中要选择的面板不止一个,所以使用的是querySelectorAll
2.当点击了第一个面板的时候,其处于展开状态,当点击第二个面板的时候,我们希望第一个面板合上且第二个面板展开,所以每次为所点击的面板加上active之前,都要先把之前面板上的active先删除。
const panels = document.querySelectorAll('.panel')
panels.forEach((panel)=>{
panel.addEventListener('click',()=>{
removeActiveClasses()
panel.classList.add('active')
})
})
function removeActiveClasses(){
panels.forEach((panel)=>{
panel.classList.remove('active')
})
}