手风琴案例02
案例演示:
1.点击文字,手风琴效果进行切换
2.图片切换的同时,背景也同时切换
项目结构:
css样式:
*{
margin: 0;
padding: 0;
}
html,body, .bg{
height: 100%;
width:100%;
}
body{
position: relative;
}
.bg{
display: none;
}
.bg-active{
display: block;
}
.bg:nth-child(1){
background:url("../images/1.jpg")no-repeat center/cover;
}
.bg:nth-child(2){
background:url("../images/2.jpg")no-repeat center/cover;
}
.bg:nth-child(3){
background:url("../images/3.jpg")no-repeat center/cover;
}
.bg:nth-child(4){
background:url("../images/4.jpg")no-repeat center/cover;
}
.main{
position: absolute;
width: 1000px;
height: 400px;
/*background-color: orange;*/
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.main ul{
list-style: none;
}
.main ul li{
float: left;
width: 100px;
height: 400px;
transition: all 1s;
}
.main ul li.li-active{
width: 700px;
height: 400px;
}
.main ul li:nth-child(1){
background: url("../images/1.jpg")no-repeat center/cover;
}
.main ul li:nth-child(2){
background: url("../images/2.jpg")no-repeat center/cover;
}
.main ul li:nth-child(3){
background: url("../images/3.jpg")no-repeat center/cover;
}
.main ul li:nth-child(4){
background: url("../images/4.jpg")no-repeat center/cover;
}
.main ul li div{
height: 400px;
width: 100px;
background-color: rgba(0,0,0,.5);
}
.main ul li div p {
color: #fff;
padding: 40px;
font-size: 22px;
opacity: 0.5;
}
HTML样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/手风琴index.js"></script>
</head>
<body>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
<div class="bg bg-active"></div>
<div class="main">
<ul>
<li><div><p>穿越火线</p></div></li>
<li><div><p>王者荣耀</p></div></li>
<li><div><p>使命召唤</p></div></li>
<li class="li-active"><div><p>英雄联盟</p></div></li>
</ul>
</div>
</body>
</html>
script
window.onload = function () {
let lis = document.querySelectorAll(".main li");
let bgs = document.querySelectorAll(".bg");
lis.forEach((item,index)=>{
item.onmouseover = function () {
lis.forEach((el,i)=>{
el.className = "";
bgs[i].classList.remove("bg-active");
});
this.className = "li-active";
bgs[index].classList.add("bg-active");
}
});
}
图片资源如下: