非常酷的jQuery手风琴插件gridAccordion

分类:代码 日期:

jQuery手风琴插件gridAccordion

演 示 下 载

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

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

使用方法

引入文件

<link rel="stylesheet" href="css/grid-accordion.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.gridAccordion.min.js"></script>

HTML

<ul class="accordion">
    <li>
        <a href="#"> <img src="images/image1.jpg" alt=""></a>
        <div class="caption">This is just a simple caption.</div>
    </li>
    <li>
        <a href="#"> <img src="images/image2.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#"> <img src="images/image3.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#"> <img src="images/image4.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#"> <img src="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
标签:
查看演示

下载本素材需消耗 50 积分

无法下载?立即反馈