fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。
主要功能有:

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式
    兼容性:兼容jQuery1.7以上。浏览器IE8以上
    使用方法:
    1.引入

    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <script src="js/jquery.min.js"></script>
    
    <!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉改文件 -->
    <script src="js/jquery.easings.min.js"></script>
    
    <!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->
    <script src="js/jquery.slimscroll.min.js"></script>
    
    <script src="js/jquery.fullPage.js"></script>

    2.html

    <div id="dowebok">
      <div class="section">
          <h3>第一屏</h3>
      </div>
      <div class="section">
          <h3>第二屏</h3>
      </div>
      <div class="section">
          <h3>第三屏</h3>
      </div>
      <div class="section">
          <h3>第四屏</h3>
      </div>
    </div>

    每个 section 代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section 加上 class=”active”,如:

第三屏

同时,可以在 section 内加入 slide,如:

<div id="dowebok">
    <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(){
    $('#dowebok').fullpage();
});

方法

名称说明
moveSectionUp()向上滚动
moveSectionDown()向下滚动
moveTo(section, slide)滚动到
moveSlideRight()slide 向右滚动
moveSlideLeft()slide 向左滚动
setAutoScrolling()设置页面滚动方式,设置为 true 时自动滚动
setAllowScrolling()添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()添加或删除键盘方向键控制
setScrollingSpeed()定义以毫秒为单位的滚动速度

回调函数

名称说明
afterLoad滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算
onLeave滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;
nextIndex是滚动到的“页面”的序号,从1开始计算;
direction判断往上滚动还是往下滚动,值是 up 或 down。
afterRender页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
afterSlideLoad滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数

本文章来源于:dowebok

Last modification:July 12, 2018
If you think my article is useful to you, please feel free to appreciate