zoukankan      html  css  js  c++  java
  • fullpage.js全屏滚动插件使用方法

    在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件

    fullpage.js插件的API:http://www.dowebok.com/77.html

    常用使用方法:

    // 配置示例
    $.fn.fullpage({    
        anchors:["page1","page2","page3"],
        slidesColor:["#fff","#000","#333"]   
    })
    //方法调用示例
    //moveTo(section, slide)设置屏幕滚动到某个section或slide,两个参数都是某个内容块的索引值或者是锚文本,默认情况下slide的索引被设置为0。
    $.fn.fullpage.moveTo(1,0)  //有动画效果
    $.fn.fullpage.silentMoveTo(1,0) //没有动画效果
    //回调函数
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
        slidesColor:["#fff","#000","#333","#666","#999"],
        
    // 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数。
    // anchorLink 是锚链接的名称
    // index 是section的索引,从1开始计算
        afterLoad: function(anchorLink, index){
            var loadedSection = $(this);
            //using index
            if(index == 3){
                alert("Section 3 ended loading");
            }
            //using anchorLink
            if(anchorLink == 'secondSlide'){
                alert("Section 2 ended loading");
            }
        }
    // 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数
    // index 是离开的“页面”的序号,从1开始计算;
    // nextIndex 是滚动到的“页面”的序号,从1开始计算;
    // direction 判断往上滚动还是往下滚动,值是 up 或 down。
        onLeave: function(anchorLink, index){
             var leavingSection = $(this);
            //after leaving section 2
            if(index == 2 && direction =='down'){
                alert("Going to section 3!");
            }
            else if(index == 2 && direction == 'up'){
                alert("Going to section 1!");
            }
        }
    });

    找到一个很不错的帮助文档:帮助文档

  • 相关阅读:
    Windows Mobile自动更新
    【实用代码片段】将json数据绑定到html元素 (转)
    B/S打印解决方案参考
    python基础之1-安装
    python里的生成器
    python中的函数的执行分类
    python中的return的返回与执行
    自创最精简的python装饰器
    python中的lambda函数用法
    python中的str.strip()的用法
  • 原文地址:https://www.cnblogs.com/leiting/p/8432427.html
Copyright © 2011-2022 走看看