FullPage
基于 jQuery的插件，它能够很方便、很轻松的制作出全屏滚动网站
- 注意：由于fullPage.js 是一个基于 jQuery 的插件,所以需要先引入jQuery.js
<script src="js/jquery-3.1.1.js"></script>
<script src="js/easings.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/fullpage.js"></script>
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()
