fullPage教程 -- 整屏滚动效果插件 fullpage详解

本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：fullPage教程 -- 整屏滚动效果插件 fullpage详解

1、引用文件[html] view plain copy print?在CODE上查看代码片派生到我的代码片<link rel="stylesheet" href="css/jquery.fullPage.css">  <script src="js/jquery.min.js"></script>  <script src="js/jquery-ui.min.js"></script>  <script src="js/jquery.fullPage.js"></script>  2、html部分[html] view plain copy print?在CODE上查看代码片派生到我的代码片<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>  3、使用方法[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片$(document).ready(function() {      $.fn.fullpage({          slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],          anchors: ['page1', 'page2', 'page3', 'page4']      });  });  

 

4、详细options参数参数类型说明默认值verticalCentered字符串内容是否垂直居中trueresize布尔值字体是否随着窗口缩放而缩放falseslidesColor函数设置背景颜色，如：无anchors数组定义锚链接无scrollingSpeed整数滚动速度，单位为毫秒700easing字符串滚动动画方式easeInQuartmenu布尔值绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动falsenavigation布尔值是否显示项目导航falsenavigationPosition字符串项目导航的位置，可选 left 或 rightrightnavigationColor字符串项目导航的颜色#000navigationTooltips数组项目导航的 tip无slidesNavigation布尔值是否显示左右滑块的项目导航falseslidesNavPosition字符串左右滑块的项目导航的位置，可选 top 或 bottombottomcontrolArrowColor字符串左右滑块的箭头的背景颜色#fffloopBottom布尔值滚动到最底部后是否滚回顶部falseloopTop布尔值滚动到最顶部后是否滚底部falseloopHorizontal布尔值左右滑块是否循环滑动trueautoScrolling布尔值是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条truescrollOverflow布尔值内容超过满屏后是否显示滚动条falsecss3布尔值是否使用 JavaScript 或 CSS3 transforms 滚动falsepaddingTop字符串与顶部的距离0paddingBottom字符串与底部距离0fixedElements字符串 无normalScrollElements  无afterLoad函数滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算无onLeave函数滚动前的回调函数，接收 index 和 direction 两个参数，index 是序号，从1开始计算，direction 判断往上滚动还是往下滚动无afterRender函数页面结构生成后的回调函数，或者说页面初始化完成后的回调函数无afterSlideLoad函数滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数无
onSlideLeave函数某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数
点击进入JS强化教程