jQuery实现手风琴效果

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

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

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

  • 最终的效果图:
img_5a56be10fbdfcb3fa0e8591a9b8c58ae.gif
效果展示图
  • 备注:
  1. 为了方便大家清晰明地阅读代码,我将一些不必要的部分去掉了,也就是每张图片下方的导航文字去掉了。
  2. 想要源代码的同学可在文末获取,整个DEMO的源码在文末有下载链接。
  3. 因为这个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');
        });
    });
    
});

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

  • 最终的效果图:
img_0bb06af7e29a6dc382b5d4bba484e6bb.gif
效果图
  • 备注:
  1. 竖版菜单的样式比较简陋,大家在自己的项目中直接进行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('+');
    });
});

三、项目源代码下载链接

相关文章
|
JavaScript
jQuery——手风琴完美实现效果(不会出现重复点击动画还没加载完成)
手风琴完美实现效果(不会出现重复点击动画还没加载完成)
88 0
|
JavaScript 前端开发
【jQuery案例】手风琴
通过jQuery实现交互效果。当鼠标指针移动到小方块时,触发鼠标指针移入事件。利用选择器获取到页面中的小方块时,通过fadeIn()和fadeOut()方法控制方块的显示与隐藏。
94 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
267 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
527 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
248 0
【jquery ajax】实现文件上传提交
|
JavaScript
利用jquery的attr方法一行代码实现的简单的图片切换效果
利用jquery的attr方法一行代码实现的简单的图片切换效果
145 0
利用jquery的attr方法一行代码实现的简单的图片切换效果
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
174 0
jquery实现单击div切换背景,再次单击回到原来样式
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
93 0
jQuery实现判断li的个数从而实现其他功能
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
330 0
JQuery+ajax实现类似百度搜索自动匹配功能
|
缓存 JavaScript 前端开发
JavaScript、jQuery实现“社区便利店收银系统”
随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页(casher.html),点击“+”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。
443 0
JavaScript、jQuery实现“社区便利店收银系统”