JS实现手风琴效果
代码实现
<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>Wild Forest</h3> </div> <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')"> <h3>Sunny Beach</h3> </div> <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')"> <h3>City on Winter</h3> </div> <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <h3>Mountains - Clouds</h3> </div>
</div>
let panels = document.querySelectorAll('.panel') panels.forEach((item,index) => { item.addEventListener('click', ()=> { panels.forEach(panel => { panel.classList.remove('active') }) document.querySelectorAll('.panel')[index].classList.add('active') }) })
*{ box-sizing: border-box; } .body{ height: 100vh; display: flex; align-items: center; justify-content: center; } .container{ display: flex; width: 90vw; } .panel{ background-size: cover; background-position: center; background-repeat: no-repeat; height: 80vh; flex: 0.5; border-radius: 60px; margin: 10px; position: relative; cursor: pointer; transition: flex 0.7s ease-in; } .panel h3{ position: absolute; bottom: 20px; left: 20px; color: #fff; opacity: 0; } .panel.active{ flex: 5; } .panel.active h3{ opacity: 1; transition: opacity 0.3s ease-in 0.4s; } @media (max-width: 480px){ .container{ width: 100vw; } .panel:nth-of-type(4),.panel:nth-of-type(5){ display: none; } }
效果实现