web前端页面开发(HTML+CSS+javascript)案例2:HTML+CSS+js实现手风琴效果

HTML+CSS+js实现手风琴效果

今天给大家分享一个用原生JS实现的手风琴特效,效果如下:
web前端页面开发(HTML+CSS+javascript)案例2:HTML+CSS+js实现手风琴效果_第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>Documenttitle>
    <link rel="stylesheet" href="./fengqin.css">
    <script src="./fengqin.js">script>
head>
<body>
    <div class="wrap">
        <div class="card active" style="background-image:url(./img/show\ 01.jpg)">
            <h3>小小h3>
        div>
        <div class="card" style="background-image:url(./img/show\ 02.png)">
            <h3>得到h3>
        div>
        <div class="card" style="background-image:url(./img/show\ 03.jpg)">
            <h3>融入h3>
        div>
        <div class="card" style="background-image:url(./img/show\ 01.jpg)">
            <h3>大哥h3>
        div>
        <div class="card" style="background-image:url(./img/show\ 03.jpg)">
            <h3>热热h3>
        div>
    div>
body>

html>

CSS代码:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    top: 20px;
    align-items: center;
    justify-content: center;
    height: 500px;
    background-color: rgb(29, 27, 27);
}
.wrap{
    display: flex;
    width: 70vw;
    height: 500px ;
    /* border: 2px solid red; */
    
}
.card{
    margin-top: 20px;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50px;
    color: aliceblue;
    flex: 0.5;
    cursor: pointer;
    height: 88vh;
    position: relative;
    margin: 18px;
    transition: flex 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}
.card h3{
    font-size: 20px;
    bottom: 28px;
    position: absolute;
    left: 20px;
    margin: 0;
    transition: opacity 0s ease-in 0s ;
}
.card.active{
    /*通过弹性布局的方式,改变每个盒子的收缩*/
    flex: 5;
}
.card.active h3{
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}
@media (max-width:500px) {
    .wrap{
        width: 100vw;
    }
    .card:nth-child(4){
        display: none;
    }
    .card:nth-child(5){
        display: none;
    }

    
}

js代码:

window.addEventListener('load', function () {
    //获取元素
    var wrap = document.querySelector('.wrap');
    var cards = wrap.querySelectorAll('.card');
   // console.log(wrap);
    //console.log(cards);
    //遍历字节给cards添加移入事件,并添加active类名即可实现
    for (var i = 0; i < cards.length; i++) {
        cards[i].setAttribute("index",i);
        cards[i].addEventListener('click', function () {
           var index =this.getAttribute("index");
           for(var j=0;j<cards.length;j++){
               cards[j].className="card";
           }
           cards[index].className=" card active"
        })
    }
  
})

你可能感兴趣的