jQuery 手风琴插件accordion.js

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

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

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

相关插件-手风琴菜单

手风琴展开动画效果(感谢上传手风琴效果的朋友)

因项目需要做一个这种风格的插件,正巧jq22上有同类型的插件。在此基础上进行精简及优化,欢迎大家使用。
  手风琴菜单
 25941  374

jQuery css3配合实现状态手风琴

jQuery css3变形手风情插件,代码简单、切换效果好。
  手风琴菜单
 33941  591

实用的Accordion手风琴js特效

实用的Accordion手风琴js特效
  手风琴菜单
 39357  408

折叠面板

这是一个轻量级的折叠面板插件,可用在二级菜单、多条目内容块等地方,使用也很方便。有三个参数可以自行设置展开时间等等
  手风琴菜单
 42677  302

讨论这个项目(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比

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