jQuery实现手风琴效果

2022-06-24 23:44:40

我们在项目总经常会遇到制作手风琴效果的需求。其实实现手风琴效果不难，特别是使用jQuery来实现，就更加简单了。这里给大家分享两个手风琴效果的制作方法。

一、横向手风琴图片切换效果

最终的效果图：

效果展示图

备注：

为了方便大家清晰明地阅读代码，我将一些不必要的部分去掉了，也就是每张图片下方的导航文字去掉了。
想要源代码的同学可在文末获取，整个DEMO的源码在文末有下载链接。
因为这个DEMO非常简单，所以大家直接通过阅读代码即可掌握。代码中也会有简单的笔记，所以这里就不在赘述。直接上代码！

HTML代码：

<div class="box">
    <ul>
        <li class="active imgBox"><img src="images/1.jpg" alt="图片"></li>

        <li class="imgBox"><img src="images/2.jpg" alt="图片"></li>

        <li class="imgBox"><img src="images/3.jpg" alt="图片"></li>

        <li class="imgBox"><img src="images/4.jpg" alt="图片"></li>

        <li class="imgBox"><img src="images/5.jpg" alt="图片"></li>

        <li class="imgBox"><img src="images/6.jpg" alt="图片"></li>

        <li class="imgBox"><img src="images/7.jpg" alt="图片"></li>
    </ul>
</div>

CSS代码：

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 1139px;
    height: 405px;
    margin: 20px auto;
}
.box ul{
    width: 100%;
    height: 100%;
    list-style: none;
    background-color: black;
    overflow: hidden;
}
.box ul .imgBox{
    width: 100px;
    height: 405px;
    display: inline-block;
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0.4;
    position: relative;
}
.box ul .active{
    width: 538px;
    height: 405px;
    opacity: 1;
}
.box ul .imgBox>img{
    height: 100%;
    cursor: pointer;
}

js代码（注意提前移入jQuery库）：

$(function(){
    // 获取页面中包含图片的li元素
    var imgLi=$('.imgBox');
    
    $.each(imgLi,function(index,value){
        $(value).mouseenter(function(e){
            // 这里一定要注意，先使用stop()停止之前的动画，再开始后面的动画，否则会有不足
            $(this).stop().animate({'width':'538px','opacity':'1'},'200');
            $(this).siblings('.imgBox').stop().animate({'width':'100px','opacity':'0.4'},'200');
        });
    });
    
});

二、竖向手风琴菜单切换效果

最终的效果图：

效果图

备注：

竖版菜单的样式比较简陋，大家在自己的项目中直接进行CSS样式修改即可。

HTML代码：

<!-- 基础版本的HTML -->
<div id="box1">
    <p><strong>手风琴·基础版本</strong></p>
    <ul class='first_ul'>
        <span class="m">悬疑推理 <b>+</b></span>
        <li>分类一</li>
        <li>分类二</li>
        <li>分类三</li>
        <li>分类四</li>
    </ul>
    <ul>
        <span class="m">古装武侠 <b>+</b></span>
        <li>分类一</li>
        <li>分类二</li>
        <li>分类三</li>
        <li>分类四</li>
    </ul>
    <ul>
        <span>职场小说 <b>+</b></span>
        <li>分类一</li>
        <li>分类二</li>
        <li>分类三</li>
        <li>分类四</li>
    </ul>
    <ul class='last_ul'>
        <span>仙侠奇幻 <b>+</b></span>
        <li>分类一</li>
        <li>分类二</li>
        <li>分类三</li>
        <li>分类四</li>
    </ul>
</div>

<!-- 改进版本的HTML -->
<div id="box2">
    <p><strong>手风琴·改进版本</strong></p>
    <ul class='first_ul'>
        <span class="m">悬疑推理 <b>+</b></span>
        <li>分类一</li>
        <li>分类二</li>
        <li>分类三</li>
        <li>分类四</li>
    </ul>
    <ul>
        <span class="m">古装武侠 <b>+</b></span>
        <li>分类一</li>
        <li>分类二</li>
        <li>分类三</li>
        <li>分类四</li>
    </ul>
    <ul>
        <span>职场小说 <b>+</b></span>
        <li>分类一</li>
        <li>分类二</li>
        <li>分类三</li>
        <li>分类四</li>
    </ul>
    <ul class='last_ul'>
        <span>仙侠奇幻 <b>+</b></span>
        <li>分类一</li>
        <li>分类二</li>
        <li>分类三</li>
        <li>分类四</li>
    </ul>
</div>

CSS代码：

body{
    display: flex;
    justify-content: center;
}
div{
    width: 400px;
    height: 600px;
    display: inline-block;
    border: 4px solid #ccc;
    border-radius: 10px;
    float: left;
    margin: 60px 40px;
}
div p{
    margin: 40px auto;
    text-align: center;
    letter-spacing: 6px;
}
ul{
    width: 140px;
    background-color: antiquewhite;
    margin: 0 20px;
    padding: 0 0 0px 0;
    list-style: none;
    border-top: 2px solid #ccc;
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
    margin: 0 auto;
    overflow: hidden;
}
.first_ul{
    border-radius: 8px 8px 0 0;
}
.last_ul{
    border-radius: 0 0 8px 8px;
}
ul span{
    width: 100%;
    display: inline-block;
    background-color: #a0beb0;
    padding: 0px 6px;
    box-sizing: border-box;
    cursor: pointer;
}
ul span b{
    float: right;
}
ul li{
    display: none;
    cursor: pointer;
}
ul li:hover{
    background-color: #bbdbcd;
}

js代码（注意提前移入jQuery库）：

$(function(){
    // 基础版本的手风琴菜单效果
    $('#box1 span').click(function(){
        var curLi=$($(this).parent().find('li'));   //获取点击的一级菜单对应的二级菜单
        // 通过判断二级菜单是否收起，来进行判断是否展开，并更换"+ -"表示
        if(curLi.css('display') == 'none'){
            curLi.slideDown();
            $(this).find('b').text('-');
        }
        else {
            curLi.slideUp();
            $(this).find('b').text('+');
        }
    });

    // 改进版本的手风琴菜单效果
    $('#box2 span').click(function(){
        var curLi=$(this).parent().find('li');              //获得当前点击的菜单的二级菜单
        var restUl=$(this).parent().siblings('ul');         //获得没有点击的一级菜单
        // 通过判断二级菜单是否收起，来进行判断是否展开，并更换"+ -"表示
        if(curLi.css('display') == 'none') {
            curLi.slideDown();
            curLi.parent().find('b').text('-');
        }
        else {
            curLi.slideUp();
            curLi.parent().find('b').text('+');
        }
        // 没有点击的二级菜单全部收起，并将标志全部改为"+"
        restUl.find('li').slideUp();
        restUl.find('b').text('+');
    });
});

三、项目源代码下载链接

土豪入口：CSDN下载-只需要2积分
新手小白入口：百度云链接-如果链接失效，可在评论区留言

码农公寓

一、横向手风琴图片切换效果

二、竖向手风琴菜单切换效果

三、项目源代码下载链接

相关文章