fullpages进阶
需要配合move.js
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
loopBottom:true,
verticalCentered:false,
anchors:['第一','第二','第三','第四'],
navigation:true,
navigtionTooltios:['它,终于来了。','阵阵与你风格贴近的个人设备','非同一般的精准计时','在三个特点鲜明的系列中找到你的风格'],
afterLoad:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1.5).end();
move('.section1 .cente').set('margin-left','40%').end();
move('.section1 a').set('margin-right','0%').end();
break;
case 2:
move('.section2 h1').scale(0.7).end();
move('.section2 a').set('margin-right','0%').end();
break;
case 3:
move('.section3 h1').set('margin-left','26%').end();
move('.section3 .cente3').set('margin-left','26%').end();
break;
case 4:
move('.section4 img.primary').rotate(360).end(function(){
move('.section4 img.sport').rotate(360).end(function(){
move('.section4 img.edition').rotate(360).end(function(){
move('.section4 h4.primary').scale(1.3).end(function(){
move('.section4 h4.sport').scale(1.3).end(function(){
move('.section4 h4.edition').scale(1.3).end();
});
});
});
});
});
break;
default:
break;
}
},
onLeave:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1).end();
move('.section1 .cente').set('margin-left','1500px').end();
move('.section1 a').set('margin-right','1500px').end();
break;
case 2:
move('.section2 h1').scale(1).end();
move('.section2 a').set('margin-right','1500px').end();
break;
case 3:
move('.section3 h1').set('margin-left','-1500px').end();
move('.section3 .cente3').set('margin-left','1500px').end();
break;
case 4:
move('.section4 img.primary').rotate(-360).end()
move('.section4 img.sport').rotate(-360).end()
move('.section4 img.edition').rotate(-360).end()
move('.section4 h4.primary').scale(1).end()
move('.section4 h4.sport').scale(1).end()
move('.section4 h4.edition').scale(1).end();
break;
default:
break;
}
},
afterRender:function(link,index){},
});
});
</script>
html代码和js代码暂时不提出来了，如果需要请联系博主QQ3026546679
效果图放在这里也看不出效果，详情请加博主QQ
