jQuery 手风琴插件accordion.js

所属分类:导航-手风琴菜单

 40089  416  查看评论 (25)
分享到微信朋友圈
X
jQuery 手风琴插件accordion.js ie兼容6

代码挺简单的,参数说明在页面有写,有问题可留言。

相关插件-手风琴菜单

jquery手风琴折叠式

多级菜单 JS 手风琴
  手风琴菜单
 40161  340

jQuery 手风琴插件accordion.js

可自定义宽高,图片数量,事件的手风琴插件
  手风琴菜单
 40090  416

jQuery全屏图片点击滑动手风琴

jQuery全屏图片点击滑动手风琴是一款全屏点击轮播切换的手风琴特效。
  手风琴菜单
 36073  336

bootstrap垂直手风琴动画特效

一款基于Bootstrap的垂直手风琴特效。该垂直手风琴特效基于原生的Bootstrap Accordion组件来制作,通过CSS3来对它进行美化,效果美观大方。
  手风琴菜单
 35833  365

讨论这个项目(25)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    技术部美工-小飞 0
    2020/8/24 11:26:22
    第一个怎么展示 回复
    技术部美工-小飞 0
    2020/8/24 11:23:12
    怎么让第一个展示? 回复
    幸福来敲门 0
    2019/10/8 16:02:03
    James Daniel May 0
    2019/1/9 10:57:28
    请问怎么改成响应式的 回复
    越长大越孤单 1
    2019/1/3 11:46:22

    纯css就可以实现这个效果:

    .box {
    	width:1000px;
    	height:450px;
    	margin:100px auto;
    	overflow:hidden;
    }
    .box div {
    	width:10%;
    	float:left;
    	transition:all 1s;
    }
    img {
    	width:960px;
    	cursor:pointer;
    }
    .box:hover div {
    	width:5%;
    }
    .box div:hover {
    	width:55%;
    }
    回复
    蓝爵阁下 0
    2018/1/14 23:47:50
    隔壁住着梦想家 0
    2017/6/26 11:06:38
    第一眼的感觉非常不错,建议在来个垂直模式. 回复
    RoseBlue 3
    2017/5/8 18:27:49

    建议加一个imgArr接口,值为图片路径数组,直接使用图片数量做接口太死板,图片路径没法自定义。为了改最少的代码,所以直接在源代码扩展,默认参数去掉imgNum换上imgArr,在this.opts属性上继承默认参数之后,添加

    this.opts.imgNum = this.opts.imgArr.length;

     然后在createElem方法中,将元素创建修改为

    str += '<li><img src="'+this.opts.imgArr[i]+'" alt="#"></li>';

    在建议加上一个默认展开页,添加属性autoShow,值为number类型:在inital中添加代码

    if(this.opts.autoShow){
     	this.change(this.$item.eq(parseInt(this.opts.autoShow)))
    }

    最后真心感谢作者提供插件

        smallhappiness0
        2017/5/8 19:30:08

        十分感谢朋友的留言,你可以把你改的发我,我直接更新上去。最近在学些别的例子,有点懒得改= =

        我邮箱: umbrellacc@qq.com

    回复
    商祺网络-朱文涛 0
    2017/5/4 0:43:09
    李肖阳55552 0
    2017/4/5 18:59:23

    图片不错 就是要q比

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复