8-6:HTML学习#24

今日学习：JS手风琴效果。学习时长：3h。

<div class="box9">
        <div class="new-wrap">
          <div class="card active" style="background-image:url(css/img/item2.jpg  );">
            <div class="new-look">舞力全开</div>
          </div>
          <div class="card" style="background-image:url(css/img/new14.jpg);">
            <div class="new-look">绝区零</div>
          </div>
          <div class="card" style="background-image:url(css/img/item1.jpg);">
            <div class="new-look">疯狂兔子</div>
          </div>
          <div class="card" style="background-image:url(css/img/new16.jpg);">
            <div class="new-look">彩虹六号M</div>
          </div>
          <div class="card" style="background-image:url(css/img/new17.jpg);">
            <div class="new-look">吉卜力公园</div>
          </div>
        </div>
      </div>




.box9{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.new-wrap{
    display: flex;
    width: 1200px;
}
.card{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0.5;
    cursor: pointer;
    height: 350px;
    position: relative;
    margin: 0px;
    transition: flex 0.7s cubic-bezier(0.05,0.6,0.4,0.9);
    box-shadow: 5px 5px 10px gray;
}
.card.active{
    flex: 5;
}
.card.active h3{
    opacity: 1;
    transition: opcity 0.3s ease-in 0.4s;
}
.new-look{
    position: relative;
    width: 130px;
    height: 40px;
    background-color: rgb(239, 239, 239,0.7);
    text-align: center;
    line-height: 40px;
    top: 300px;
    display: block;
    color:black;
    font-weight: 1000;
    
}
@media(max-width:500px){
    .new-wrap{
        width: 100%;
    }
    .card:nth-child(4){
        display: none;
    }
    .card:nth-child(5){
        display: none;
    }
}




//手风琴效果
 let wrap=document.getElementsByClassName("new-wrap")[0];
 let cards=wrap.getElementsByClassName("card");

 for(let k=0;k<cards.length;k++){
    cards[k].addEventListener("mouseover",function(){
        removeActive();
        this.className="card active";
    })
 }
 function removeActive(){
    for(let k=0;k<cards.length;k++){
        cards[k].className="card";
    }
 }