FullPage基本使用

FullPage

基于 jQuery的插件，它能够很方便、很轻松的制作出全屏滚动网站

• 注意：由于fullPage.js 是一个基于 jQuery 的插件,所以需要先引入jQuery.js

new fullpage(){}

• 设置每一屏的背景颜色

sectionsColor: ['#f00', '#0f0', '#00f', '#000'],

• 显示指示器

navigation: true

• 设置指示器的提示信息

navigationTooltips: ['111111111111111','222222222222','3333333333333333','4444444444444']

• 让指示器的提示信息默认就显示

showActiveTooltip: true

• 设置指示器显示的位置(可以是左边, 也可以是右边)

navigationPosition: 'left'

• 滚动到最后一屏或者第一屏是否要接着滚动

// loopBottom: true,
// loopTop: true,
continuousVertical: true,

• onLeave (origin, destination, direction)

onLeave: function (origin, destination, direction) {
    console.log("滚动之前调用", origin, destination, direction);
    },
   // 一旦用户离开某个节，过渡到新节，就会触发此回调。 返回“false”将在移动发生之前取消移动
    //origin: (Object) 起始章节相关信息
    //destination: (Object) 目标章节相关信息。
    //direction: (String) 它将根据滚动方向采用up或down值。
    */

• afterLoad (origin, destination, direction)

afterLoad: function (origin, destination, direction) {
    console.log("滚动之后调用", origin, destination, direction);
}
//滚动结束之后，一旦加载了节，就会触发回调。参数：
//origin: (Object) 起始章节相关信息
//destination: (Object) 目标章节相关信息。
//direction: (String) 它将根据滚动方向采用up或down值。

• 滚动到上一屏

fullpage_api.moveSectionUp()

• 滚动到下一屏

fullpage_api.moveSectionDown()

• 滚动到指定屏

fullpage_api.moveTo(num)

• 获取当前屏

fullpage_api.getActiveSection()