原生js实现手风琴功能(支持横纵向调用)

话不多说,请看代码:

成都创新互联公司是一家集网站建设,汉阴企业网站建设,汉阴品牌网站建设,网站定制,汉阴网站建设报价,网络营销,网络优化,汉阴网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。




 
 手风琴-支持横纵向调用-原生js封装
 
 
 
 
 
 


 
 
  • 1
  • 2
  • 3
  • 4
  • 5

不传参数,执行默认参数,鼠标点击预览图切换

new accordion("#accordion");

  • 1
  • 2
  • 3
  • 4
  • 5

执行默认参数,设置横向展开{direction: "x"},设置隐藏体可是区大小{expose: 50}默认单位为px,鼠标点击预览图切换

new accordion("#accordion1", { direction: "x", expose: 50 });

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

执行默认参数,设置纵向展开{direction: "y"},设置隐藏体可是区大小{expose: 30}默认单位为px,鼠标点击预览图切换

new accordion("#accordion2", { direction: "y", expose: 30 });

  • 1
  • 2
  • 3
  • 4

执行默认参数,设置纵向展开{direction: "y"},设置隐藏体可是区大小{expose: 30}默认单位为px,设置运动速度{speed: 100},鼠标点击预览图切换

new accordion("#accordion3", { direction: "y", expose: 30, speed: 100 });

调用方法:

new accordion(selector,{options});

options参数

参数 默认值 说明
direction "x" 设置横向展开{direction: "x"},设置纵向展开{direction: "y"}
expose 30 设置隐藏体可是区大小{expose: 30}默认单位为px
speed 30 设置运动速度{speed: 100}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!


当前名称:原生js实现手风琴功能(支持横纵向调用)
转载来源:http://ybzwz.com/article/pojigg.html