day-1(手风琴)
HTML块
<!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">
<title>Document</title>
</head>
<body>
<ul>
<li class="open" 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);"><p>背景1</p> </li>
<li 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);"><p>背景2</p> </li>
<li 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);"><p>背景3</p> </li>
<li 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);"><p>背景4</p> </li>
</ul>
</body>
</html>
CSS块
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
height: 100vh;
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) ;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 0;
background-size: cover;
}
ul{
display: block;
width: 800px;
height: 400px;
border-radius: 30px;
overflow: hidden;
}
li{
width: 80px;
height: 100%;
float: left;
background-size:cover;
transition: .5s;
cursor: pointer;
border-radius: 20px;
overflow: hidden;
}
li p{
/* position: absolute; */
width: 80px;
height: 100px;
background-color: rgba(255,255,255,.5);
color: white;
font-size: 35px;
border-radius: 20px;
/* margin-left: 20px; */
}
.open{
width: 480px;
}
JS块
// --------------------法1----------------------------
const lis = document.getElementsByTagName('li');
let showIndex = 0; //当前open展开的下标;
for(let i =0;i<lis.length;i++){
lis[i].index = i;
lis[i].onclick = function(){
for(let j = 0;j<lis.length;j++){
if(showIndex === this.index){
return ;}
lis[j].className = ''
}
this.className = 'open'
showIndex = this.index //修改showindex
document.body.style.backgroundImage = this.style.backgroundImage;
}
}
//-------------------法2---------------------------------
// let showIndex = 0; //当前open展开的下标;
// for(let i = 0;i<lis.length;++i){
// lis[i].index = i;
// lis[i].onclick = function(){
// if(showIndex === this.index){
// return ;
// }
// //法2 推荐使用
// lis[showIndex].className = ''; // 动态添加下表
// this.className = 'open'; //展开点击 的li
// showIndex = this.index //修改showindex
// document.body.style.backgroundImage = this.style.backgroundImage;
// }
// }
// -----------------法3----------------------------
// const lis = document.querySelectorAll('li');
// lis.forEach(li=>{
// li.addEventListener('click',()=>{
// removeActiveClasses()
// li.classList.add('open')
// document.body.style.backgroundImage = li.style.backgroundImage
// })
// })
// function removeActiveClasses(){
// lis.forEach(li=>{
// li.classList.remove('open')
// })
// }
![](https://i-blog.csdnimg.cn/blog_migrate/e39826ea1f26a49e0005c8dd1830c16e.png)
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/692588e53ed069aa6c45b38ee91e0d52.png)