练手小案例：用js实现好看又好玩的手风琴

效果图：

效果图还是非常好看的！实现原理其实非常简单，就是利用js给对应的标签添加类和删除类，下面直接展示代码！

HTML部分：

    <div class="box">
        <ul>
            <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
        </ul>
    </div>

 CSS部分：

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
img{
    border:none;
    width: 600px;
}
.box{
    width: 1000px; /* 1个 600px，4个 100px*/
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    overflow: hidden;
}
.box>ul{
    display: flex;   
    justify-content: space-between; 
}
.box>ul>li{
    width: 100px;
    height: 335px;
    position: relative;
    overflow: hidden;
    transition:all 0.4s;   
    flex-grow: 1;   /* 让 li 始终能占满整个 ul ，保证变化过程中 li 之间没有缝隙 */
    /* background-color: purple; */
}
.box>ul>li>img{
    position: absolute;   
    left:50%;
    top:0;
    margin-left: -300px;
}
.box>ul>li.active{    
    width: 600px;
}

JavaScript部分：

let lis = document.querySelectorAll(".box > ul > li");
lis[0].classList.add("active");// 初始化
function findOther(obj){
    let other = [];
    for(let i=0; i<=lis.length-1; i++){
        if(obj !== lis[i]){
            other.push(lis[i]);
        }
    }
    return other;
}
for(let i=0;i<=lis.length-1;i++){
    lis[i].addEventListener("mouseenter",function(){
        this.classList.add("active");
        let other = findOther(this);
        for(let j=0; j<=other.length-1; j++){
            other[j].classList.remove("active");
        }
    });
}

赶紧动手试试吧！学会了记得点赞哦！