【无标题】

手风琴效果 jquery

CSS

*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}

.box{
    width: 599px;
    height: 142px;
    /* margin-top: -200px; */
    margin: 200px auto;
    border: 1px solid orange;
}
.box ul li img{
    width: 300px;
    height: 140px;
    /* display: block; */
}
.box ul{
    position: relative;
   height: 140px;
   border-left: 1px solid #ddd;
}
.box ul li{
    width: 50px;
    height: 140px;
    border: 1px solid #ccc;
    float: left;
    list-style: none;
    border-left: 0;
    position: relative;
    overflow: hidden;
}
.box ul li.on{
    width: 430px;
}
.box ul li h3{
    font-size: 20px;
    color: aquamarine;
    font-weight: 500;
    width: 14px;
    height: 102px;
    padding: 40px 18px 0;
}
.box ul li h3.on{
    background-color: #f427f4;
}
.box ul li img{
    width: 383px;
    height: 140px;
    background: blue;
    position: absolute;
    top: 0;
    left: 50px;
    border: 1px solid orangered;
}

JQUERY: