fullpage.js参数参考

fullpage函数里面的参数：

//Navigation
menu: false,//绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。
anchors:['firstPage', 'secondPage'],//anchors定义锚链接，默认为[]
lockAnchors: false,//是否锁定锚链接，默认为false,设为true后链接地址不会改变
navigation: false,//是否显示导航，默认为false
navigationPosition: 'right',//导航小圆点的位置
navigationTooltips: ['firstSlide', 'secondSlide'],//导航小圆点的提示
showActiveTooltip: false,//是否显示当前页面的tooltip信息
slidesNavigation: true,//是否显示横向幻灯片的导航，默认为false
slidesNavPosition: 'bottom',//横向导航的位置，默认为bottom，可以设置为top或bottom

//Scrolling
css3: true,//是否使用CSS3 transforms来实现滚动效果，默认为true
scrollingSpeed: 700,//设置滚动速度，单位毫秒，默认700
autoScrolling: true,//是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条
fitToSection: true,//设置是否自适应整个窗口的空间，默认值：true
scrollBar: false,//是否包含滚动条，默认为false,若为true浏览器自带滚动条出现
easing: 'easeInOutCubic',//定义页面section滚动的动画方式，若修改此项需引入jquery.easing插件
easingcss3: 'ease',//定义页面section滚动的过渡效果，若修改此项需引入第三方插件
loopBottom: false,//滚动到最低部后是否连续滚动到顶部，默认为false
loopTop: false,//滚动到最顶部后是否连续滚动到底部，默认为false
loopHorizontal: true,//横向slide幻灯片是否循环滚动，默认为true
continuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项
normalScrollElements: '#element1, .element2',//避免自动滚动，滚动时的一些元素，例如百度地图
scrollOverflow: false,//内容超过满屏后是否显示滚动条，true则显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合
touchSensitivity: 15,//在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动
normalScrollElementTouchThreshold: 5,

//Accessibility
keyboardScrolling: true,//是否可以使用键盘方向键导航，默认为true
animateAnchor: true,//锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效
recordHistory: true,//是否记录历史，默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭

//Design
controlArrows: true,//定义是否通过箭头来控制slide,默认true
verticalCentered: true,//定义每一页的内容是否垂直居中，默认true
resize : false,//字体是否随窗口缩放而缩放，默认false
sectionsColor : ['#ccc', '#fff'],//为每个section设置background-color属性
paddingTop: '3em',设置每一个section顶部的padding,默认为0
paddingBottom: '10px',设置每一个section底部的padding,默认为0
fixedElements: '#header, .footer',固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动
responsiveWidth: 0,
responsiveHeight: 0,

//Custom selectors
sectionSelector: '.section',//section选择器。默认为.section
slideSelector: '.slide',//slide选择器，默认为.slide

//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}

fullpage函数里面的方法：

onLeave (index, nextIndex, direction)

滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数

  • index 是离开的“页面”的序号，从1开始计算；
  • nextIndex 是滚动到的“页面”的序号，从1开始计算；
  • direction 判断往上滚动还是往下滚动，值是 up 或 down。
$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 && direction =='down'){
            alert("Going to section 3!");
        }
        else if(index == 2 && direction == 'up'){
            alert("Going to section 1!");
        }
    }
});

取消section的滚动

你可以在onLeave 回调函数中返回false，那么将取消滚动。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

afterLoad (anchorLink, index)

滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数。

  • anchorLink 是锚链接的名称
  • index 是section的索引，从1开始计算

在没有设置锚文本的情况下，只有使用唯一的index参数。

$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	afterLoad: function(anchorLink, index){
		var loadedSection = $(this);
		//using index
		if(index == 3){
			alert("Section 3 ended loading");
		}
		//using anchorLink
		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});

afterRender()

这个回调函数只是在生成页面结构的时候调用。这是要用来初始化其他插件或删除任何需要的文件准备好代码的回调（这个插件修改DOM创建得到的结构）。

$('#fullpage').fullpage({
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
});

afterResize()

这个回调函数在窗口发生大小改变的时候被调用，就在部分调整。

$('#fullpage').fullpage({
    afterResize: function(){
        var pluginContainer = $(this);
        alert("The sections have finished resizing");
    }
});

afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

  • anchorLink: anchorLink corresponding to the section.
  • index: index of the section. Starting from 1.
  • slideAnchor: anchor corresponding to the slide (in case there is)
  • slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)

在没有anchorlinks的幻灯片或幻灯片SlideIndex参数是唯一使用定义的情况下。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);
 
        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }
 
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

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

某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

  • anchorLink: anchorLink corresponding to the section.
  • index: index of the section. Starting from 1.
  • slideIndex: index of the slide. Starting from 0.
  • direction: takes the values right or left depending on the scrolling direction.
  • nextSlideIndex: index of the destination slide. Starting from 0.
$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);
 
        //leaving the first slide of the 2nd Section to the right
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }
 
        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

取消slide滑动

你可以设置回调函数onSlideLeave 返回false，那么他将阻止此次的滑动事件，就像onLeave一样。

Fullpage方法函数

	$.fn.fullpage.moveSectionUp();//向上滚动一页
	$.fn.fullpage.moveSectionDown();//向下滚动一页
	$.fn.fullpage.moveTo(section,slide);//从1开始，slide从0开始
	$.fn.fullpage.silentMoveTo(section,slide);//和moveTo一样，但是没有滚动效果
	$.fn.fullpage.moveSlideRight();//幻灯片向右滚动
	$.fn.fullpage.moveSlideLeft();//幻灯片向左滚动
	$.fn.fullpage.setAutoScrolling(boolean);//动态设置autoScrolling
	$.fn.fullpage.setLockAnchors(boolean);//动态设置lockAnchors
	$.fn.fullpage.setRecordHistory(boolean);//动态设置recordHistory
	$.fn.fullpage.setScrollingSpeed(milliseconds);//动态设置scrollingSpeed
	$.fn.fullpage.destory(type);//销毁fullpage,type可以不写或者使用all
	$.fn.fullpage.reBuild();/重新更新页面和尺寸，用于ajax请求改变页面结构后重建效果

资源延时加载

fullpage.js提供了一种懒加载图像，视频和音频元素，所以他们不会放慢您的网站加载或不必要的浪费数据传输。使用延迟加载时，所有这些元素只会加载时进入视口。启用延迟加载，所有你需要做的是改变你的src属性的data-src如下图所示：

<img data-src="image.png">
<video>
  <source data-src="video.webm" type="video/webm" />
  <source data-src="video.mp4" type="video/mp4" />
</video>
但是audio不可以：
<audio>
　　<source data-src="test.mp3" type="audio/mpeg"/>
</audio>
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/nature-wind8/p/10350813.html