fullpage 方法

moveSectionUp():

向上滚动一页

moveSectionDown():

向下滚动一页

moveTo(section,slide):

滚动到第几页 第几个幻灯片

section从1开始  slide从0开始

使用方式

$.fn.fullpage.XXX()

selientMoveTo():

滚动到第几页和moeTo一样 只不过没有动画效果

moveSlideRight():

幻灯片向右滚动

moveSlideLeft():

幻灯片向左滚动

setAllowScrolling(boolen,[directions]):

添加或删除鼠标滚轮控制 第一个参数 true false 第二个参数表示方向 up down right left 可以使用多个 用逗号隔开

比如我们在设置一个有奖问答页面时,当用户发现前面的页面有答案时,不希望用户滚动回去查看答案可以使用这样的方法

destory(type)

销毁fullpage特效

type不写 fullpage提供的样式 html还在(背景颜色等还在)

(all) 样式 页面html 全部销毁

reBuild()y

重新定义页面和尺寸,用于ajax请求改变了页面结构之后,重建效果

 

延迟加载图片或视频 <img data-src="">

<img data-src="img.png>

视频

<video data-src="vedio.webm" type="vedio/webm">

</video>

<video data-src="vedio.mp4" type="vedio/mp4">

</video>

 

 

fullpage回调函数(在滚动的过程中触发相应的操作)

afterLoad(anchorLink,index)

滚动到某个Sectio,滚动结束后会触发该回调函数,anchorLink是锚链接的名称,index是序号从1开始

我们可以根据anchorLink和index参数值的判断触发相应的操作 

$(document).ready(function(){

 $('#fullpage').fullpage({

   afterLoad: function(anchorLink,index){

   console.log("afterLoad anchorLink"+anchorLink+", index"+index);

  }

 

});

});

 

onLeave(index,nextIndex,direction)

当离开一个Section时触发该回调函数 接收三个参数

通过return false;可以取消滚动

在afterLoad之前而且只触发一次

 

afterRend()

当页面生成后会调用的回调函数,或者页面初始化时

afterResize()

当浏览器的窗口大小发生变化时调用

afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)

当滚动到某个幻灯片的回调函数

afterSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)

当离开某个幻灯片的回调函数

                               

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

posted @ 2016-01-29 16:05  北辰星l  阅读(527)  评论(0编辑  收藏  举报