一,认识
fullPage.js 是一个基于jQuery的插件,它能够很方便、很轻松的制作出全屏网站。
它有以下这些特点:
1.支持鼠标滚动
2.多个回调函数
3.支持手机、平板触屏事件
4.支持css3动画
5.支持窗口缩放
6.窗口缩放时自动调整
7.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等
关于下载
下载地址:
http://fullpage.81hu.com/
关于引入
引入FullPage.css
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css">
.引入FullPage.js和jquery.js
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.min.js"></script>
二,使用
关于结构
<div id="wrapper">
<div class="section">
第一屏
</div>
<div class="section">
第二屏
<div class="slide">第二屏的第一屏</div>
<div class="slide">第二屏的第二屏</div>
<div class="slide">第二屏的第三屏</div>
<div class="slide">第二屏的第四屏</div>
</div>
<div class="section">
第三屏
</div>
<div class="section">
第四屏
</div>
</div>
和bootstrap一样,fullpage也要使用固定的类名,来控制页面的固定的样式,产生全屏的效果;
首先这个结构首先自己先创建一个外部div,内部有4个div,分别是4个垂直屏,类名是section,然后也有横切屏,类名是slide。
关于调用和相关的方法
调用:
$(function(){
$('#wrapper').fullpage();
});
相关的方法:
sectionColor
可以为每一个section设置background-color属性。
active
在页面中为某一个section添加了active之后,默认当窗口打开时会定位到此active,显示当前页。
fixedElements
固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素固定不动。
回调函数
$('#wrapper').fullpage({
sectionsColor : ['#f00' , '#0f0' , '#00f' , '#f0f'],
afterLoad : function(anchorLink , index){
console.log('lode' , index);
},
//滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接受anchorLink和index两个参数
onLeave : function(index , nextIndex , direction){
console.log('leave' , index , nextIndex , direction);
}
//在我们离开一个section时,会触发一次此回调函数,接受index、nextIndex和direction 3个参数
})