大气的jQuery fullPage.js 全屏滚动

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

在线实例

垂直滚动

水平滚动

CSS3 动画1

CSS3 动画2

CSS3 动画3

过度效果

回调函数

自动滚动

使用方法

1. <div id="pageContain"> 
2.     <div class="page page1 current"> 
3.         <div class="contain"> 
4.             <p class="txt">第一屏</p> 
5.         </div> 
6.     </div> 
7.  
8.     <div class="page page2"> 
9.         <div class="contain"> 
10.             <p class="txt">第二屏</p> 
11.         </div> 
12.     </div> 
13.    ...... 
14. </div> 
15.  
16. <ul id="navBar"> 
17.     <li>1</li> 
18.     <li>2</li> 
19.     ....... 
20. </ul>

复制

1. var runPage; 
2. runPage = new FullPage({ 
3.     id: 'pageContain', 
4.     slideTime: 800, 
5.     effect: { 
6.         transform: { 
7.             translate: 'Y' 
8.         }, 
9.         opacity: [0, 1] 
10.     }, 
11.     mode: 'wheel, touch, nav:navBar', 
12.     easing: 'ease' 
13. });

复制

参数详解

参数	描述	默认值
id	外层包裹 id	-
slideTime	每页切换时间，单位为毫秒	800
effect	切换效果	-
mode	转换模式	-
callback	滑动结束后的回调函数	-
prev()	向上滚动一页/一屏	-
next()	向下滚动一页/一屏	-
thisPage()	返回当前的页码	-
go(num)	滚动到第 num 页	-

下载