酷酷的jQuery classicAccordion 手風琴

標籤：

線上執行個體

效果一

效果二

效果三

使用方法

手風琴ul li列表<ul class="accordion">     <li>         <img src=#"/>         <div class="caption">超帥的中文響應式網路公司網頁模板</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和vertical	horizontal
width	手風琴寬度	500
height	手風琴高度	300
alignType	對其方式	leftTop
distance	間隔距離	0
slideshow	開啟滑動效果	false
slideDuration	滑動延時時間	700
openPanelOnMouseOver	滑鼠懸浮開啟	true
closePanelOnMouseOut	滑鼠離開關閉	true
openPanelOnClick	滑鼠點擊開啟	false

下載

 

酷酷的jQuery classicAccordion 手風琴