大气的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 页-

相关推荐