一个轻巧的fullpage
框架,不依赖其他任何库,主要针对移动端设备(同时也支持桌面端),压缩后不到4kb。
轻松创建炫酷的单页滑动网站。
一个简单的DEMO ##功能
- 触摸控制
- 键盘方向键控制
- 鼠标滚轮控制
##兼容性
Android 4.1+ | Safari 7.1+ | IE 11 | Opera | Chrome | firefox |
---|
##使用方法
- 引入 JavaScript 文件
fullPage.min.js
- 引入 css 文件
fullPage.css
(如果你使用less
,则可以在less主文件中引入fullPage.less
) - 按照下面格式书写
html
代码(其中 id 为sectionContent
的为包裹层,你可以自定义修改其id)
<div id="sectionContent" class="section-content">
<div class="section">
<div class="slide-wrap">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
</div>
</div>
<div class="section">2</div>
<div class="section">3</div>
</div>
##初始化 简单使用,只要在页面加载完成后执行:
fullpage.init('#sectionContent');
如果需要定制化,则需要如下方法:
fullpage.init('#sectionContent',{
threshold: 10, //触发滚动事件的阈值,越小越灵敏
pageSpeed: 600, //滚屏速度,单位为毫秒 ms
autoScroll: false, //是否自动播放
autoScrollDuration: 1000, //自动播放间隔时间
loopSection: true, //Section循环滚动
loopSlide: true, //Slide循环滑动
afterLoad: null, //页面载入事件,具体查看下面的 afterLoad 函数
beforeLeave: null //页面离开事件,具体查看下面的 beforeLeave 函数
});
###beforeLeave(leaveIndex,nowIndex)
离开当前页面时触发的事件,函数中 this
指向当前页面的 section,leaveIndex
为要离开页面的 index
,nowIndex
为要载入页面的 Index
###afterLoad(afterIndex)
载入下一张页面后触发的事件,函数中 this
指向将要载入页面的 section
, afterIndex
为要载入页面的 index
###beforeSlideLeave(pageIndex, slideNow, slideAfter)
离开当前 Slide 时触发的事件,pageIndex
是当前section
的index
,slideNow
是当前slide
的index
,slideAfter
是要载入slide
的index
###afterSlideLoad(pageIndex, slideIndex)
载入下一个slide
后触发的事件,pageIndex
是当前section
的index
,slideIndex
是要载入slide
的index
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);
}
});
##方法
###init(el,options)
页面初始化,el
为最外包裹层选择器,options
是要定制的参数。具体同初始化
###moveTo(index,slideIndex)
滚动到指定页面,index
为必选参数,slideIndex
为可选参数
fullpage.moveTo(1) //滚动到第一个页面
fullpage.moveTo(3,2) //滚动到第三个页面的第二个slider
###moveToNext(callback)
垂直滚动到下一个页面,callback
为回掉函数,可选。
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
###moveToPre(callback)
垂直滚动到上一个页面,用法同 moveToNext(callback)
###slideToNext()
水平滚动到下一个页面(页面向左滚动)
###slideToPre()
水平滚动到上一个页面(页面向右滚动)
Copyright 2015 kisnows(https://github.com/kisnows)
Licensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.