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. <div class="page page2">
8. <div class="contain">
9. <p class="txt">第二屏</p>
10. </div>
11. </div>
12. ......
13. </div>
14. <ul id="navBar">
15. <li>1</li>
16. <li>2</li>
17. .......
18. </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 页	-

---

下载