注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery响应式水平手风琴插件liteAccordion

动画 fishcity 1368浏览

liteAccordion是一个专业的响应式jquery水平手风琴插件,可让你的网站轻松的创建动感个性的手风琴特效,liteAccordion经过多个版本的更新,增加了许多新的属性与功能。

使用方法

在header区引入核心文件

<link rel="stylesheet" href="liteAccordion.css">
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script src="js/liteaccordion.jquery.js"></script>

创建基础的html代码
<div id="yourdiv">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
  </div>

写入JS初始化

  $('#yourdiv').liteAccordion();

选项

以下为 liteAccordion的参数默认值

containerWidth : 960,                   // fixed (px)
containerHeight : 320,                  // fixed (px)
headerWidth: 48,                        // fixed (px)

activateOn : 'click',                   // 点击还是悬浮触发动画
firstSlide : 1,                         // 页面加载时加载第n个滑块
slideSpeed : 800,                       // 滚动的速度
onTriggerSlide : function() {},         // 滑块激活后回调
onSlideAnimComplete : function() {},    // 动画结束后回调

autoPlay : false,                       // 循环自动播放
pauseOnHover : false,                   // 悬浮时暂停
cycleSpeed : 6000,                      // 循环一圈的时间
easing : 'swing',                       // 自动动画函数

theme : 'basic',                        // 主题:basic, dark, light, colorful, or stitch
rounded : false,                        // 方块或圆角
enumerateSlides : false,                // 赋值数字给滑块
linkable : false                        // link slides via hash,哈希链接滑块

带参数初始化

$('#one').liteAccordion({
    onTriggerSlide : function() {
        this.find('figcaption').fadeOut();
    },
    onSlideAnimComplete : function() {
        this.find('figcaption').fadeIn();
    },
    autoPlay : true,
    pauseOnHover : true,
    theme : 'stitch',
    rounded : true,
    enumerateSlides : true
}).find('figcaption:first').show();

方法

以下为liteAccordion的方法

play                                    // 播放
stop                                    // 停止
next                                    // 下一个滑块
prev                                    // 上一个滑块
destroy                                 // 销毁实例
debug                                   // 返回一个debug对象

更多实例效果请参考官方文档。

转载请注明:jQ酷 » jquery响应式水平手风琴插件liteAccordion

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。