使用fullpage制作手机全屏年度账单，使用jquery.easings.js特效应用

　　最近要做一个类似支付宝的年度账单的页面，全屏翻页用的fullpage.js,特效用的jquery.easings.js库。

• 中文fullpage.js 页面演示和接口文档 下载地址：https://github.com/alvarotrigo/fullPage.js　　　　
• jquery.easings.js jquery的easing特效演示

1、页面引入js库

$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,//是否显示导航，默认为false
navigationPosition: 'right',//导航小圆点的位置
css3:true,
afterRender:function(){
//页面初始化后的回调
sectionAnimate.section_1_show();
},
onLeave:function(index,nextIndex,direction){
// index 是离开的“页面”的序号
// nextIndex 是滚动到的“页面”的序号，从1开始计算；
// direction 判断往上滚动还是往下滚动，值是 up 或 down
var $indicator =  $(".section-arrow-down-indicator");
if(nextIndex == 10){//如果是最后一页就隐藏向下箭头
$indicator.hide();
}else{
$indicator.show();
}
if(index == 1){
sectionAnimate.section_1_hide();
}else if(index == 2){
sectionAnimate.section_2_hide();
}else if(index == 3){
sectionAnimate.section_3_hide();
}
},
afterLoad:function(anchorLink, index){
//滚动到某一屏后的回调
//anchorLink 是锚链接的名称
//index 是section的索引，从1开始计算
if(index == 1){
sectionAnimate.section_1_show();
}else if(index == 2){
sectionAnimate.section_2_show();
}else if(index == 3){
sectionAnimate.section_3_show()
}
}
});

//向下箭头绑定事件
$(".section-arrow-down-indicator").tap(function(e){
e.preventDefault();
e.stopPropagation();
$('#fullpage').fullpage.moveSectionDown();
});
});
var sectionAnimate = {
section_1_show:function(){
$(".image-1-1").animate({
height: '55%'
},1000,"easeInOutBack");
$(".image-1-2").animate({
left: '10px'
},2000,"easeInOutBack");
$(".image-1-3").animate({
top: '6%',
height:"6%"
},1000,"easeInOutBack");
$(".image-1-4").animate({
bottom: '8%'
},3000,"easeInOutBack");
},
section_1_hide:function(){
$(".image-1-1").animate({
height: '1%'
},1000,"easeInOutBack");
$(".image-1-2").animate({
left: '-50%'
},1000,"easeInOutBack");
$(".image-1-3").animate({
top: '-50%',
height:"0"
},1000,"easeInOutBack");
$(".image-1-4").animate({
bottom: '-50%'
},1000,"easeInOutBack");
},
section_2_show:function(){
$(".image-2-1").animate({
height: "10%"
},1000,"easeInOutBack");
$(".image-2-2").animate({
height: "3%"
},2000,"easeInOutBack");
$(".image-2-3").animate({
bottom: "15%",
height: "25%"
},3000,"easeInOutBounce");
},
section_2_hide:function(){
$(".image-2-1").animate({
height: "0"
},1000,"easeInOutBack");
$(".image-2-2").animate({
height: "0"
},1000,"easeInOutBack");
$(".image-2-3").animate({
bottom: "-50%",
height: "0"
},1000,"easeInOutBack");
},
section_3_show:function(){
$(".image-3-1").animate({
height: "10%"
},1000,"easeInOutBack");
$(".section-3-text-1").animate({
left:"0"
},500,"easeInOutBack");
$(".section-3-text-2").animate({
left:"0"
},1000,"easeInOutBack");
$(".section-3-text-3").animate({
left:"0"
},1500,"easeInOutBack");
$(".section-3-text-4").animate({
left:"0"
},2000,"easeInOutBack");
},
section_3_hide:function(){
$(".image-3-1").animate({
height: "0"
},1000,"easeInOutBack");
$(".section-3-text-1").animate({
left:"100%"
},500,"easeInOutBack");
$(".section-3-text-2").animate({
left:"100%"
},500,"easeInOutBack");
$(".section-3-text-3").animate({
left:"100%"
},500,"easeInOutBack");
$(".section-3-text-4").animate({
left:"100%"
},500,"easeInOutBack");
}
};

 4、页面效果展示