jQuery fullPage.js 全屏滚动

fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。

在线实例

垂直滚动

水平滚动

CSS3 动画1

CSS3 动画2

CSS3 动画3

过度效果

回调函数

自动滚动

使用方法

<div id="pageContain"> 
    <div class="page page1 current"> 
        <div class="contain"> 
            <p class="txt">第一屏</p> 
        </div> 
    </div> 
 
    <div class="page page2"> 
        <div class="contain"> 
            <p class="txt">第二屏</p> 
        </div> 
    </div> 
   ...... 
</div> 
 
<ul id="navBar"> 
    <li>1</li> 
    <li>2</li> 
    ....... 
</ul>

var runPage; 
runPage = new FullPage({ 
    id: 'pageContain', 
    slideTime: 800, 
    effect: { 
        transform: { 
            translate: 'Y' 
        }, 
        opacity: [0, 1] 
    }, 
    mode: 'wheel, touch, nav:navBar', 
    easing: 'ease' 
});

参数详解