超简单的 jquery 版 手风琴滑块效果

超简单的 jquery 版 手风琴滑块效果

h5手风琴效果的写法有很多,我所写的效果 主要是使用jquery的animate方法实现的,鼠标移入手风琴左右滑动展示当前的模块,具体效果如下:
查看地址 link>>

image.png
  • 页面结构如下:将所要展示的图片生成列表

  • css 样式如下
.accordionBox {
            /*--手风琴动画效果--*/
            width: 100%;
            height: 449px;
            margin: 40px auto 38px auto;
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }
        .accordionBox ul {
            height: 449px;
            overflow: hidden;
        }
        .accordionBox ul li {
            width: 140px;
            height: 449px;
            position: relative;
            overflow: hidden;
            float: left;
            margin-right: 2px;
        }
        .accordionBox ul li img {
            width:100%;
            height: 100%;
            object-fit: cover;
            border: 1px solid #1388ef;
        }
        .accordionBox ul li.first {
            width: 627px;
        }
  • js写法,通过鼠标的mouseover事件,实现手风琴效果
    $(function(){
        //执行动画
        var index = 0;
        $(".accordionBox").on("mouseover", "ul > li", function (e) {
            index = $(this).index();
            $(".accordionBox ul li").removeClass("on");
            $(this).stop().stop().addClass("on").animate({ width: 627 }, 500).siblings("li").stop().animate({ width: 140 }, 500);
            $(".imgCen").eq(index).css("display", "block").siblings(".imgCen").css("display", "none");
        });
    })

需要完整代码的请参考git地址 —— [ 手风琴github ]

你可能感兴趣的:(超简单的 jquery 版 手风琴滑块效果)