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

效果图:

练手小案例:用js实现好看又好玩的手风琴_第1张图片

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

HTML部分:

    

 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");
        }
    });
}

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

你可能感兴趣的:(JavaScript,css,前端,css3,javascript,html5)