[代码样式]非常酷的jQuery手风琴插件gridAccordion

gridAccordion 是一个基于 jQuery 的手风琴插件，它制作出的手风琴效果非常酷，这个手风琴是“网”状的，可以垂直和水平伸缩。它可以指定区域内水平显示多少个对象，可以设置自动播放。同时可以添加其他元素，然后通过参数控制元素的大小及位置，使手风琴内容更加丰富。

gridAccordion兼容所有浏览器，包括 IE6、IE7。

使用方法

引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/grid-accordion.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.gridAccordion.min.js"></script>

HTML

<ul class="accordion">
    <li>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://www.dowebok.com/images/image1.jpg" alt=""></a>
        <div class="caption">This is just a simple caption.</div>
    </li>
    <li>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://www.dowebok.com/images/image2.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://www.dowebok.com/images/image3.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://www.dowebok.com/images/image4.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" > <img src="https://www.dowebok.com/images/image5.jpg" alt=""> </a>
    </li>
    ......
</ul>

JavaScript

$(function($) {
    $('.accordion').gridAccordion({
        width: 960,
        height: 680,
        columns: 5,
        distance: 2,
        closedPanelWidth: 10,
        closedPanelHeight: 10,
        alignType: 'centerCenter',
        slideshow: true,
        panelProperties: {
            0 : {
                captionWidth: 200,
                captionHeight: 35,
                captionTop: 30,
                captionLeft: 30
            },
            4 : {
                captionWidth: 150,
                captionHeight: 100,
                captionTop: 30,
                captionLeft: 650
            },
            7 : {
                captionWidth: 310,
                captionHeight: 35,
                captionTop: 350,
                captionLeft: 40
            },
            8 : {
                captionWidth: 300,
                captionHeight: 40,
                captionTop: 150,
                captionLeft: 35
            },
            11 : {
                captionWidth: 150,
                captionHeight: 120,
                captionTop: 300,
                captionLeft: 30
            },
            14 : {
                captionWidth: 300,
                captionHeight: 40,
                captionTop: 30,
                captionLeft: 50
            },
            16 : {
                captionWidth: 150,
                captionHeight: 120,
                captionTop: 150,
                captionLeft: 10
            },
            18 : {
                captionWidth: 300,
                captionHeight: 40,
                captionTop: 130,
                captionLeft: 50
            }
        }
    });
});

参数

panelProperties 为控制手风琴内元素的大小及位置，如果手风琴内没有其他元素可省略此参数。

1. xmlSource: null
2. width: 500
3. height: 300
4. alignType: “leftTop”
5. distance: 0
6. columns: 3
7. slideshow: false
8. slideshowDelay: 5E3
9. slideshowDirection: “next”
10. stopSlideshowOnHover: true
11. slideDuration: 700
12. openPanelOnMouseOver: true
13. closePanelOnMouseOut: true
14. openPanelOnClick: false
15. preloadPanels: false
16. shuffle: false
17. openedPanelWidth: “auto”
18. openedPanelHeight: “auto”
19. closedPanelWidth: 30
20. closedPanelHeight: 30
21. captionFadeDuration: 500
22. captionWidth: 300
23. captionHeight: 100
24. captionTop: 100
25. captionLeft: 30
26. shadow: false
27. linkTarget: “_blank”
28. openPanelDelay: 200
29. panelProperties: null
30. panelMouseOver: null
31. panelMouseOut: null
32. panelClick: null
33. panelLoaded: null
34. panelCreated: null
35. allPanelsCreated: null
36. animationComplete: null
37. openPanel: null