fullpage学习笔记

最近H5的页面滑屏很火，两个比较轻量级的框架很很火。

• slip，他是通过控制父元素的transform:
  translateY或margin-top或top的值来上下滑动页面，每次的位移的取值为当前页面高度。
• fullpage，他是通过控制子容器的方法实现的滑屏，只显示其中一个子元素，其它隐藏，滑屏时隐藏当前元素，并显示当前元素的下一个同辈元素。
• fullpage.js和fullpage是不一样的，fullpage.js是基于jQuery库的，是开源的JQuery插件库，而fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。

runPage = new FullPage({

    id : 'pageContain',
    slideTime : 800,
    continuous : true,
    effect : {
        transform : {
            translate : 'Y',
            scale : [1, 1],
            rotate : [0, 0]
        },
        opacity : [0, 1]
    },
    mode : 'wheel,touch',
    easing : 'ease',
});

属性/方法	类型	默认值	说明
id	字符串		外层包裹 id（必须）
slideTime	整数	800	每页切换时间，单位为毫秒
effect	对象		切换效果
mode	字符串	空	转换模式
callback	函数	空	滑动结束后的回调函数
prev()			向上滚动一页/一屏
next()			向下滚动一页/一屏
thisPage()			返回当前的页码
go(num)			滚动到第 num 页
continuous			是否返回第一页