今天看啥
热点:

fullPage.js全屏滚动插件API,fullpage.js全屏api


API

  1. menu:
    绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器。

  2. navigation:
    是否显示导航,默认false。若为true,会显示小圆点作为导航

  3. navigationPosition:
    导航小圆点的位置,可以设置为left或者right。

  4. navigationTooltips:
    导航小圆点的tooltips设置,默认为[],注意按照顺序设置。

  5. showActiveTooltip:
    是否显示当前页面的导航的tooltip信息,默认为false

  6. slidesNavigation:
    是否显示横向幻灯片的导航,默认为false

  7. slidesNavPosition:
    横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom

  8. scrollOverflow:
    内容超过满屏后是否显示滚动条,默认为false.若设置为true,则会显示滚动条,如果要滚动查看内容,还需要jquery.slimscroll插件的配合。slimscroll插件主要用于模拟传统的浏览器滚动条。

  9. sectionSelector:
    section的选择器,默认为.section。

  10. slideSelector:
    slide的选择器,默认为.slide。

方法

  • moveSectionUp():
    向上滚动一页。

  • moveSectionDown():
    向下滚动一页。

  • moveTo(section,slide):
    滚动到第几页,第几个幻灯片,注意:页面是从1开始,而幻灯片是从0开始。

  • silentMoveTo(section,slide):
    滚动到第几页,和moveTo一样,但没有动画效果。

  • moveSlideRight():
    幻灯片向右滚动。

  • moveSlideLeft():
    幻灯片向左滚动。

  • setAutoScrolling(boolean):动态设置autoScrolling

  • setLockAnchors(boolean):动态设置lockAnchors

  • setRecordHistory(boolean):动态设置recordHistory

  • setScrollingSpeed(milliseconds):动态设置scrollingSpeed

  • setAllowScrolling(boolean,[directions]):
    添加或删除鼠标滚轮/滑动控制,第一个参数true为启用,false为禁用,后面的参数为方向,取值包含:all,up,down,left,right,可以使用多个,逗号分隔。

  • destroy(type):
    销毁fullpage特效,type可以不写,或者使用all,不写type,fullpage给页面添加的样式和html元素还在,如果使用all,则样式、html等全部销毁,页面恢复和不使用fullpage相同的效果。

  • reBuild():
    重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果。

Lazy Loading

  • 图片:
    <img data-src="image.png">
  • 视频:
    <video>
        <source data-src="video.webm" type="video/webm"/>
        <source data-src="video.mp4" type="video/mp4"/>
    </video>

    用data-src代替src就可以实现延迟加载图片。

回调函数

  • afterLoad(anchorLink,index)
    滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接收 anchorLink 和 index 两个参数, anchorLink 是锚链接的名称, index 是序号,从1开始计算。

    我们可以根据 anchorLink 和 index 参数值的判断,触发相应的事件。

  • onLeave(index,nextIndex,direction)
    在我们离开一个 section 时,会触发一次此回调函数,接收 index 、 nextIndex 和 direction 3个参数:

    index是离开的“页面”的序号,从1开始计算;
    nextIndex是滚动到的目标“页面”的序号,从1开始计算;
    direction判断往上滚动还是往下滚动,值是 up 或 down。
    

    通过return false;可以取消滚动

  • afterRender()
    页面结构生成后的回调函数,或者说页面初始化完成后的回调函数

  • afterResize()
    浏览器窗口尺寸改编后的回调函数

  • afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
    滚动到某一幻灯片后的回调函数,与afterLoad类似。

  • onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
    在我们离开一个slide时,会触发一次此回调函数,与onLeave类似。




www.513bk.comtruehttp://www.513bk.com/jQuery/1314683.htmlTechArticlefullPage.js全屏滚动插件API,fullpage.js全屏api API menu: 绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设...

相关文章

相关搜索: jquery

帮客评论

视觉看点