jQuery多功能手风琴

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

 46237  541  查看评论 (13)
分享到微信朋友圈
X
jQuery多功能手风琴 ie兼容8

更新时间:2017/12/11 下午5:31:06

更新说明:更新为支持IE8以上版本


更新时间:2017/12/1 上午9:07:12

更新说明:

1. 按钮样式修改

2. 更新遮罩层样式

3. accordion-description的padding宽度由95更为98


路径中DEV为开发版本,DIST为发布版本

{
    imageObj: [], //存放图片对象  
    arrangement: "horizontal", //verticality 对齐方式  
    fontCut: 500, //文字截取(500个字符内) 
    defaultWidth: 100, //默认初始宽度 
    defaultHeight: 100, //默认初始高度  
    animateWidth: 600, //默认放大宽度  
    animateHeight: 200, //默认放大高度  
    response: true, //是否使用响应式  
    styleColor: {
        "background": "white",
        "font": "#333333",
        "textShadow": "0px 0px 1px green"
    }, //自定义遮罩颜色样式 
    animateTime: "0.5s", //动画速度
};
相关插件-手风琴菜单

jQuery手风琴动画效果

鼠标点击图片手风琴展开特效
  手风琴菜单
 47635  426

jQuery鼠标经过风琴展开效果

jQuery鼠标经过水平手风琴展开收缩动画效果
  手风琴菜单
 45621  671

jQuery扁平化风格手风琴菜单

这是一款基于jQuery的扁平化风格的手风琴菜单,菜单是垂直的,点击菜单项即可垂直展开,显示对应菜单项的相关描述。另外,这款jQuery垂直手风琴菜单的菜单项还有一个漂亮的小图标,是一款比较实用的jQuery菜单插件。
  手风琴菜单
 34297  360

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

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

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

    panhuakai 0
    2021/5/14 9:57:10
    ie8不兼容啊,样式乱了 回复
    何玉龙 0
    2020/11/24 17:18:51
    怎么换图标啊?换成文字的,找不到在哪换的。。。。
        BattleofLexington1
        2020/11/24 20:40:20
        accordion.js中第111行 '<i class="accordion-icon fa '+ val.icon +'"></i>'
        何玉龙0
        2020/11/24 21:05:11
        是那里👍谢谢🌹
        何玉龙0
        2020/11/24 21:05:11
        是那里👍谢谢🌹
    回复
    不吃香菜的小冰同学 0
    2019/11/6 9:44:12
    这个感觉好棒啊 回复
    何丶H 0
    2019/11/5 14:34:37
    点击图片怎么不会跳转啊? 回复
    im 0
    2019/6/14 1:45:42
    这个是响应式的吗
        佬鸡0
        2019/7/10 9:43:07
        是的嘞。有什么问题可以到我的github上面提问https://github.com/devin-huang
    回复
    树先生 0
    2019/1/25 11:45:58
    图标怎么换啊老哥 回复
    人生漫漫路 0
    2018/6/14 9:51:07
    如何默认展开第一个li ? 回复
    0
    2018/3/29 23:40:53
    请问如何设置当前状态打开的样式
        佬鸡0
        2018/3/30 10:29:25
        打开的样式目前只有默认的一种啊
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复