2
3
A light JavaScript framework to build fullpage site in a simple way, write with pure JavaScript.
npm install fullpagefullpage框架,不依赖其他任何库,gzip 后不到1kb。
bash
npm install fullpage
`
* 引入位于 build 目录下的 fullpage.min.js(或 fullpage.js 做为开发环境)
* 引入 css 文件 fullpage.css
* 按照下面格式书写html代码(其中 id 为 sectionContent 的为包裹层,你可以自定义修改其id)
`html
2
3
`
初始化
简单使用,只要在页面加载完成后执行:
`javascript
fullpage.init('#sectionContent');
`
如果需要定制化,则需要如下方法:
`javascript
fullpage.init('#sectionContent',{
threshold: 10, // 触发滚动事件的阈值,越小越灵敏
pageSpeed: 600, // 滚屏速度,单位为毫秒 ms
autoScroll: 0, // 自动播放时间间隔,如果为 0 则不自动播放,单位 ms
loopSection: true, // Section循环滚动
loopSlide: true, // Slide循环滑动
afterLoad: null, // 页面载入事件,具体查看下面的 afterLoad 函数
beforeLeave: null, // 页面离开事件,具体查看下面的 beforeLeave 函数
afterSlideLoad: null, // slide 载入事件
beforeSlideLeave: null // slide 离开事件
});
`
$3
离开当前页面时触发的事件,函数中 this 指向当前页面的 section,leaveIndex为要离开页面的 index ,nowIndex 为要载入页面的 Index
$3
载入下一张页面后触发的事件,函数中 this 指向将要载入页面的 section, afterIndex 为要载入页面的 index
$3
离开当前 Slide 时触发的事件,pageIndex是当前section的index,slideNow是当前slide的index,slideAfter是要载入slide的index
$3
载入下一个slide后触发的事件,pageIndex是当前section的index,slideIndex是要载入slide的index
`javascript
fullpage.init('#sectionContent', {
beforeLeave: function (leaveIndex, nowIndex) { // 如果现在在第1个页面,向下滚动后
if (nowIndex === 2) { // leaveIndex = 1,nowIndex = 2
console.log('You will leave page 2') // 这条语句会执行
}
console.log(this, leaveIndex, nowIndex) // 这里的 this 指向将要离开的页面元素,即第一个页面
},
afterLoad: function (afterIndex) { // afterIndex = 2
if (afterIndex === 2) {
console.log('You will go to page 2') // 这条语句会执行
}
console.log(this, afterIndex) // 此处 this 指向当前载入的页面,即第二个页面
},
beforeSlideLeave: function (pageIndex, slideNow, slideAfter) {
var _this = this;
console.log(_this, 'beforeSlideLeave:', pageIndex, slideNow, slideAfter);
},
afterSlideLoad: function (pageIndex, slideIndex) {
var _this = this;
console.log(_this, 'afterSlideLoad:', pageIndex, slideIndex);
}
});
`
方法
$3
页面初始化,el为最外包裹层选择器,options是要定制的参数。具体同初始化
$3
滚动到指定页面,index 为必选参数,slideIndex为可选参数
`javascript
fullpage.moveTo(1) // 滚动到第一个页面
fullpage.moveTo(3,2) // 滚动到第三个页面的第二个slider
`
$3
垂直滚动到下一个页面,callback为回掉函数,可选。
`javascript
fullpage.moveToNext(); // 滚动到下一个页面
fullpage.moveToNext(callback) // 滚动到下一个页面后,执行 callback
fullpage.moveToNext(callback,params...) // 滚动到下一个页面后,执行 callback,params为callback的参数,根据情况传入
function foo(a,b){
console.log(a,b)
}
fullpage.moveToNext(foo,1,2) // 滚动到下一个页面,并输出 1,2
`
$3
垂直滚动到上一个页面,用法同 moveToNext(callback)`