介绍
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
fullpage.js兼容jquery1.7以上版本,兼容ie8+浏览器,谷歌、火狐、opera浏览器都兼容。
配置
常见的配置如下:
$(function(){
$('#dowebok').fullpage({
slidesColor: ['#0075D1','#C2E5FF','#FDF6E1','#E9E9E9','#F3F3F3','#F9F3DC'],//每一屏的背景色
anchors: ['page1','page2','page3','page4','page5','page6'],//每一屏的锚点名称
navigation:false//是否显示项目导航
navigationPosition:right,//项目导航的位置,可选 left 或 right
afterRender: function(){
//此处为页面渲染后执行的事件
}),
afterLoad: function (anchorLink,index) {
//此处为跳转到该屏时执行的事件,参数anchorLink 是锚链接的名称,index 是section的索引,从1开始计算
},
onLeave: function (index,nextIndex,direction) {
/* 此处为离开该屏时执行的事件,参数index 是section的索引,从1开始计算,
nextIndex 是滚动到的“页面”的序号,从1开始计算;direction 判断往上滚动还是往下滚动,值是 up 或 down。*/
}
});`
使用自定义导航
有时我们想自己设定导航的样式,可以不使用配置中默认的navigation选项,使用menu选项指定我们自定义的导航所对应的dom结构。
menu:"#menu"
在dom结构中:
这样就能够让我们绑定菜单,从而可以控制滚动。