现在很多官方网站都会采用全屏滚动的设计方式，全屏滚动加上简单的描述就能营造出高端大气的效果，实现全屏滚动的插件有很多，例如iscroll，fullpage等，今天着重学习一下fullpage.js插件 参考文章：http://blog.csdn.net/qianqianyixiao1/article/details/47148329
以下来自官网说明： 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
以下来自官网说明： fullPage.js 支持 IE8+ 及其他现代浏览器。
1.首先下载相关插件： css部分： 
js部分： 
2.html部分
//注：每一个分页面的class一定要包含section，否则fullpage.css无法识别样式<div id="indexList"> <div class="section active"> <h1 id="page1_h1">第一屏</h1> </div> <div class="section"> <h1 id="page2_h1">第二屏</h1> </div> <div class="section"> <h1 id="page3_h1">第三屏</h1> </div> <div class="section"> <h1 id="page4_h1">第四屏</h1> </div></div>3.实现页面切换和动画效果 注：此处动画采用animate.css处理
$(function(){ $("#indexList").fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'rgb(156, 206, 139)'], afterLoad:function(anchorLink, index){//index从1开始 if(index == 1){ $("#page1_h1").addClass("animated fadeInLeft"); } if(index == 2){ $("#page2_h1").addClass("animated bounce"); } if(index == 3){ $("#page3_h1").addClass("animated fadeIn"); } if(index == 4){ $("#page4_h1").addClass("animated fadeInLeft"); } }, onLeave:function(index, direction){ if(index == 1){ $("#page1_h1").addClass("animated fadeInLeft"); } } }); });完整代码如下：fullpage.js的demo
附： 
注：本图截取自http://blog.csdn.net/qianqianyixiao1/article/details/47148329文章
新闻热点
疑难解答
