FullPageAPI

fullpage配置项

  • 调用fullpage.js
    $('#fullpage').fullpage()

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

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

  • sectionsColor
    可以为每个section设置background-color属性。

  • controlArrows
    定义是否通过箭头来控制slide幻灯片,默认为true。
    设置为false时,幻灯片两侧箭头消失,移动设备上,可通过滑动来操作幻灯片。

  • verticalCentered
    每一页的内容是否垂直居中,默认为true。

  • resize
    字体是否随着窗口缩放而缩放,默认为false。

  • scrollingSpeed
    设置滚动速度,单位是毫秒,默认为700。

  • anchors
    定义锚链接,默认值为[],有了锚链接,用户就可以快速打开定位到某一页面。
    定义锚链接的时候,值不要和页面中任意的id或name相同,而且定义时,不需要加#。

  • lockAnchors
    是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接也就是anchors无效。

  • animateAnchor
    锚链接是否可以控制滚动动画,默认为true。
    设置为false时,通过锚链接定位到某个页面显示不再有动画效果。

  • easing
    定义页面滚动的动画方式,如果修改此项,需要引入jquery.easings插件,或者jquery.ui。

  • css3
    是否使用css3 transform 来实现滚动效果,默认为true。
    设置为false时,使用jQuery动画来实现滚动。

  • loopTop
    滚动到最顶部后是否连续滚动到底部,默认为false。

  • loopBottom
    滚动到最底部后是否连续滚动回顶部,默认为false。

  • continuousVertical
    是否循环滚动,默认为false。设置为true时,页面循环滚动。
    和loopTop/loopBottom不兼容,不能同时设置。

  • loopHorizontal
    横向slide幻灯片是否循环滚动,默认为true。

  • autoScrolling
    是否插件的滚动方法,默认为true。
    设置为false时,会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认方式。

  • recordHistory
    是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。
    如果autoScrolling: false,那么这个设置也将被关闭,即设置为false。

  • scrollBar
    是否包含滚动条,默认为false。
    设置为true时,会出现浏览器自带的滚动条,页面还是按页滚动,但滚动条默认行为也有效。

  • paddingTop/paddingBottom
    设置每个section顶部/底部的padding,默认为0。
    如果需要设置一个固定在顶部或底部的菜单、导航、元素等,可以使用这两个配置项。

  • fixedElements
    页面滚动时固定的元素,默认为null,需要配置一个jquery选择器。
    页面滚动时,fixedElements设置的元素固定不动。

  • keyboardScrolling
    是否可以使用键盘方向键导航,默认为true。

  • tochSensitivity
    在移动设备中滑动页面的敏感性,默认为5,最大为100,越大越难滑动。

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

  • navigation
    是否显示导航,默认为false。设置为true时,会显示小圆点作为导航。

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

  • navigationTooltips
    鼠标浮动到导航小圆点上时的文字提醒,默认为[],注意按照顺序设置。

  • showActiveTooltip
    是否显示当前页面的导航文字提醒,默认为false。

  • slidesNavigation
    是否显示横向幻灯片的导航,默认为false。

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

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

fullpage方法

  • fullpage方法的使用方式:
    $.fn.fullpage.xxx()

  • moveSectionUp()
    向上滚动一页。

  • moveSectionDown()
    向下滚动一页。

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

  • silentMoveTo(section, slide)
    滚动到第几页,第几个幻灯片,没有动画效果。

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

  • moveSlideLeft()
    幻灯片向在滚动。

  • setAutoScrolling(boolean)
    动态设置autoScrolling。

  • setLockAnchors(boolean)
    动态设置lockAnchors。

  • setRecordHistory(boolean)
    动态设置recordHistory。

  • setScrollingSpeed(milliseconds)
    动态设置scrollSpeed。

  • setAllowScrolling(boolean, [directions])
    添加或删除滚轮/滑动控制,第一个参数为true时启动,false为禁止。
    第二个参数为方向,取值包括:all、up、down、left、right,可以使用多个。

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

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

fullpage回调函数

  • afterLoad(anchorLink, index)
    滚动到某一section,且滚动结束后,触发此回调函数。
    anchorLink是锚链接的名称,index是序号,从1开始计算。
    可以根据anchorLink的index参数值的判断,触发相应的事件。

  • onLeave(index, nextIndex, direction)
    在我们离开一个section时,触发此回调函数。
    index:离开页面的序号,从1开始计算。
    nextIndex:目标页面的序号,从1开始计算。
    direction:判断往上滚动还是往下滚动,值是up或down。
    通过return false; 可以取消滚动。

  • afterSlideLoad(anchorLink, index, slideAnchor, slideIndex)
    滚动到某一个幻灯片后触发此回调函数。

  • onSlideLeave(anchorLink, index, slideIndex, direction, nextSlideIndex)
    离开某一个幻灯片时触发此回调函数。

  • afterRender()
    页面初始化完成后触发此回调函数。

  • afterResize()
    浏览器窗口改变后触发此回调函数。

你可能感兴趣的:(FullPageAPI)