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

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

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

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

使用方法

引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/grid-accordion.css">
<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="#"> <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="#"> <img src="https://www.dowebok.com/images/image2.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#"> <img src="https://www.dowebok.com/images/image3.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#"> <img src="https://www.dowebok.com/images/image4.jpg" alt=""> </a>
    </li>
    <li>
        <a href="#"> <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
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]jQuery垂直滚动插件Totem

2020-11-6 9:51:20

脚本代码

[代码样式]简单的banner幻灯片

2020-11-6 9:51:22

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索