初次使用fullpage

• fullpage简介

1.功能

2.获取

github主页

•  fullpage引入和结构

1.引入

使用了cdn在线代码库

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css"/>

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/vendors/jquery.easings.min.js"></script>(可选，若需要更多的动画效果)

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>

 

2.结构

 基本的页面结构

section:每一屏（页）

    <div id="fullpage">
        <div class="section"></div>
        <div class="section"></div>
        <div class="section"></div>
    </div>

给某一个section（页）增加slide（幻灯片）

  <div class="section">
       <div class="slide"></div>
       <div class="slide"></div>
       <div class="slide"></div>
       <div class="slide"></div>
  </div>

 3.激活fullpage效果

$(document).ready(function(){
      $('#fullpage').fullpage();
});

 

 

 

 

 

 

 

 

 

 

•   fullpage配置项

sectionsColor:['','','',''],//分别为各个section设置背景颜色
controlArrows： ，默认为true，定义是否通过箭头来控制slide，当我们设置为false,则幻灯片左右两侧的箭头就会消失，在移动设备上，我们可以通过滑动来操作幻灯片
vertical： ，默认为true，每一页的内容是否垂直居中；
resize： ，默认为false，字体是否随着窗口缩放而缩放；
scrollingSpeed： ，滚动速度，单位为毫秒，默认为700；
anchors：['page1','','',''],定义锚链接，使每个section在地址栏有不同地址，便于直接找到某一section
lockAnchors: ,默认为false，若为true，则所添加的anchors不会自动在地址栏生效，需手动在地址栏地址后面加上自己的命名
}）；

easing： ，定义页面section的滚动方式，默认为easeInOutCubic，如果修改此项需引入jquery.easings插件或 jquery ui，
css3： ，是否使用css3 transforms来实现滚动效果，默认为true，可以提供支持css3的浏览器，比如移动设备等的速度
loopTop： ，滚动到顶部后是否连续滚动到底部，默认为false；
loopBottom： ，滚动到底部以后是否连续滚动到顶部，默认为false；
loopHorizontal： ，横向slide是否循环滚动，默认为true；
autoScrolling： ，是否使用插件的滚动方式，默认为true，，如果为false，则会出现浏览器的滚动条，将不会按页滚动，而是按照滚动条的行为来滚动。
scrollBar： ，是否包含滚动条，默认为false，如果设置为true，则按页滚动与滚动条滚动均有效
paddingTop/paddingBottom: ,设置每一个section的顶部和底部的padding，默认为0；
fixedElements：‘#ID名’，固定的元素，默认值为null，需要为其配置一个jquery选择器，在页面滚动的时候，fixedElements设置的元素固定不动，如果不加这个属性，那么你想固定的东西会被覆盖掉；
keyboardScrolling： ，是否可以使用键盘方向键导航，默认为true；
touchSensitivity： ，在移动设备中滑动页面的敏感性，默认为5，最高为100，越大越难滑动
continuousVertial: ,是否循环滚动，默认为false，如果设置为true，则页面会循环滚动，但是不会像loopTop/loopBottom那样生硬（这个属性和两个loop不兼容），
animateAnchor：锚链接是否可以控制滚动动画，默认为true，若设置为false，则通过锚链接定位到某个section时不会有动画

// paddingTop:100 设置每个section顶部的padding 默认0 如果有固定顶部菜单导航使用
// paddingBottom:200 设置每个section底部的padding 默认0 如果有固定底部使用
// fixedElements:'#jk' 页面固定元素
// keyboardScrolling:true 是否用键盘控制 默认true
// touchSensitivity:10 在移动设备中的灵敏度 默认5 按百分比衡量 最高100 越大越难滑动
// continuousVertical:true 是否循环翻页 与padTOP padBOT不兼容 不要同时设置
// animateAnchor:true 是否可以用锚链接控制滚动动画 默认true
menu: '#fullpageMenu', //
navigation: true, //是否显示导航（小圆点）
navigationPosition: 'right', //设置小圆点位置 left right
navigationTooltips: ['第一页', '第二页', '第三页', '第四页'], //小圆点锚记
showActiveTooltip: true, //是否显示当前导航的小圆点信息 默认false
slidesNavigation: true, //是否显示幻灯片小圆点
slidesNavPosition: 'bottom', // 小圆点位置 可设置top，bottom
scrollOverflow: true, //单页超出内容是否出现滚动条 需要slimscroll插件支持
sectionSelector: //section的选择器 默认为.section
slideSelector: //slide的选择器 默认为.slide

 

fullpage方法

 

 fullpage方法的使用：
$.fn.fullpage.方法名称()
方法：moveSectionUp()
moveSectionDown()
moveTo(section,slide):滚动到第几页，第几个slide，页面是从一开始，slide是从0开始的
moveSlideRight():幻灯片向右滚动
moveSliadLeft（）：幻灯片向左滚动
setAutoScrolling（boolean）：动态设置autoScrolling
setLockAnchors(boolean):动态设置lockAnchor
setRecordHistory(boolean):动态设置recordHistory
setScrollingSpeed(milliseconds):动态设置scrollingspped
setAllowScrolling（Boolean，[directions]）:添加或删除鼠标滚轮/滑动控制，第一个参数表示是否启用，第二个为方向：all，up，down，left，right，方向可以取多个值，用逗号隔开
destroy(type):type为空时，则fullpage特效消失，但HTML样式，结构仍存在；type为all时，则页面的一切均消失
reBuild（）：重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果。


延迟加载图片及视频：
<img data-src="">
<video>
<source data-src="" type="">
</video>(在src之前加data-就可调用)

 

 

回调函数

回调函数：写在配置项的位置处
afterLoad（anchorLink，index）
滚动到某一section处，且滚动结束后，会触发一次此回调函数，函数接收anchorLink和index 两个参数，anchorLink是锚链接，index是序号（从1开始）。
作用：我们可以根据anchorLink和index的参数值的判断，触发相应的事件。
实例：afterLode：function（anchorLink，index）{
console.log（"afterLode:anchorLink"+anchorLink+";index:"+index）;//将两个参数打印出来，在控制台可以看到
}

onLeave（index，nextIndex，direction）
在离开一个页面时，会触发一次此回调函数，接收index（离开时页面的序号）、nextIndex（滚动到的目标页面的序号）和direction（滚动的方向，有up和down）3个参数
通过return false；可以取消滚动

afterRender（）
页面初始化完成后的回调函数

afterResize（）
浏览器窗口尺寸改变后的回调函数

afterSlideLode（anchorLink，index，slideAnchor，slideIndex）
滚动到某一slide后的回调函数，与afterLode类似，接收anchorLink、index、slideIndex、direction4个参数

onSlideLeave（anchorLink，index，slideIndex，direction，nextSlideIndex）
在离开一个slide时会触发此函数，与onLeave相似，接收anchorLink、index、slideIndex、direction4个参数

转载于:https://www.cnblogs.com/gremlin/p/5461018.html