你的位置:首页 > Java教程

[Java教程]酷酷的jQuery classicAccordion 手风琴


在线实例

效果一效果二效果三

使用方法

手风琴ul li列表<ul >     <li>         <img src=#"/>         <div >超帅的中文响应式网络公司网页模板</div>     </li>    ...</ul>$(document).ready(function() {     accordion = $('.accordion').classicAccordion({width: 1200, height: 400, slideshow: true, shadow: true, alignType: 'centerCenter', closedPanelSize: 40,         panelProperties: {             0: {captionWidth: 200, captionHeight: 35, captionTop: 30, captionLeft: 30},             2: {captionWidth: 380, captionHeight: 40, captionTop: 330, captionLeft: 30},             4: {captionWidth: 150, captionHeight: 120, captionTop: 270, captionLeft: 600},             7: {captionWidth: 300, captionHeight: 35, captionTop: 180, captionLeft: 250},             8: {captionWidth: 380, captionHeight: 40, captionTop: 330, captionLeft: 30},             10: {captionWidth: 150, captionHeight: 120, captionTop: 30, captionLeft: 620}         }     });      accordion.openPanel(0); });

  

参数详解

参数描述默认值
captionWidth标题宽度300
captionHeight标题高度100
captionTop标题顶部距离100
captionLeft标题左侧距离30
shadow是否显示阴影层true
linkTarget打开链接方式,默认新窗口_blank
openPanelDelay打开延迟时间200
orientation手风琴方向,有horizontal和verticalhorizontal
width手风琴宽度500
height手风琴高度300
alignType对其方式leftTop
distance间隔距离0
slideshow开启滑动效果false
slideDuration滑动延时时间700
openPanelOnMouseOver鼠标悬浮打开true
closePanelOnMouseOut鼠标离开关闭true
openPanelOnClick鼠标点击打开false

下载