【无标题】

一念永恒@

于 2022-05-25 23:07:27 发布

阅读量71

点赞数

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/qq_48435896/article/details/124975893

版权

本文介绍了一种使用jQuery和CSS实现的手风琴效果。通过调整元素的宽度和位置，可以制作出平滑过渡的动画效果。该教程详细展示了如何设置CSS样式及jQuery脚本来控制图像的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手风琴效果 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:

在这里插入图片描述