全屏滚动插件FullPage.js中文帮助文档API

简介

fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站。

主要功能

• 支持鼠标滚动
• 支持前进后退和键盘控制
• 多个回调函数
• 支持手机、平板触摸事件
• 支持 CSS3 动画
• 支持窗口缩放
• 窗口缩放时自动调整
• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

浏览器兼容

浏览器兼容

IE7+ ✔	Edge ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

3、JavaScript

$(function(){
 $('#fullpage').fullpage({
 'verticalCentered': false,
 'css3': true,
 'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
 anchors: ['page1', 'page2', 'page3', 'page4'],
 'navigation': true,
 'navigationPosition': 'right',
 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
 })
 })
 经测试，最好至少有 anchors 这个参数，否则在火狐浏览器中，第一次滚动会直接滚到底部。

经测试，最好至少有 anchors 这个参数，否则在火狐浏览器中，第一次滚动会直接滚到底部。

配置

1、选项

2、方法

3、回调函数

如何获取