利用fullpage.js插件实现全屏滚动

fullpage.js是一个基于jQuery的插件，能帮助我们很容易的实现酷炫的全屏网站的制作。一般全屏网站用几个很大的图片或色块做背景，在添加一些简单的内容，显得格外的高端大气上档次。fullpage.js支持移动设备主要的功能有:

支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

在所有主流浏览器上都兼容，支持IE 8+

在使用上面我们首先要引入相应的文件:

<link rel="stylesheet" href="jquery.fullPage.css">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.fullPage.min.js"></script>
<!-- jquery.easings.min.js 用于 easing 参数，如果不需要设置easing参数，可不引入该文件 -->
<script src="js/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>

下面用一个例子说明fullpage.js的使用:

   <link rel="stylesheet" href="jquery.fullPage.css">
    <style>
        h3,p{
            text-align: center;
            font:"Microsoft Yahei";
        }
        .section1{
            background: url('images/1.jpg') 50%;
        }
        .section2{
            background: #4BBFC3;
        }
        .section2 p{
            position: relative;
            left: -120%;
        }
        .section3{
            background: #7BAABE;
        }
        .section3 p{
            position: relative;
            bottom: -120%;
        }
        .section4{
            background: #f90;
        }
        .section4 p{
            display: none;
        }
        #menu{
            margin: 0;
            padding:0;
            position: fixed;
            top:10px;
            left:20px;
            list-style-type: none;
            z-index: 100;
        }
        #menu li{
            float:left;
            margin:0 10px 0 0;
            font-size: 16px;
        }
        #menu a{
            color:#333;
            background: #fff;
            padding:6px 8px;
            text-decoration: none;
        }
        #menu .active a{
            color:#fff;
            background: #333;
        }
    </style>

<!--   href值要与anchors值保持一致-->
    <ul id="menu">
        <li data-menuanchor="about" class="active"><a href="#about">主页</a></li>
        <li data-menuanchor="work"><a href="#work">作品</a></li>
        <li data-menuanchor="photo"><a href="#photo">相册</a></li>
        <li data-menuanchor="article"><a href="#article">日志</a></li>
    </ul>

    <div id="loading">
        <div class="section section1">
            <h3>主页</h3>
        </div>
        <div class="section section2">
            <h3>作品</h3>
            <p>这是我的作品内容</p>
        </div>
        <div class="section section3">
            <h3>相册</h3>
            <p>这是相册页面</p>
        </div>
        <div class="section section4">
            <h3>日志</h3>
            <p>这是日志页面</p>
        </div>
    </div>

    <script src="jquery-1.8.3.min.js"></script>
    <script src="jquery.fullPage.min.js"></script>
    <script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script>
    $(function(){
        $('#loading').fullpage({
         //   定义锚链接，与接下来的跳转页面有关
            anchors:['about','work','photo','article'],
            menu:'#menu',
        //    显示项目导航栏
            navigation:true,
            navigationPosition:'right',
            navigationTooltips:['home','work','photo','article'],
        //    循环滚动
            continuousVertical:true,

// 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
            afterLoad:function(anchorLink,index){
                    if(index == 2){
                        $('.section2').find("p").delay(500).animate({
                            left:'0'
                        },1200,'easeOutExpo');
                    }
                    if(index == 3){
                        $('.section3').find('p').delay(500).animate({
                            bottom:'0'
                        },1200,'easeOutExpo');
                    }
                    if(index == 4){
                        $('.section4').find('p').fadeIn(2000);
                    }
                },
//滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：

//index 是离开的“页面”的序号，从1开始计算；

//nextIndex 是滚动到的“页面”的序号，从1开始计算；

//direction 判断往上滚动还是往下滚动，值是 up 或 down。
                onLeave:function(index,direction){
                    if(index == 2){
                        $('.section2').find('p').delay(500).animate({
                            left:'-120%'
                        },500,'easeOutExpo');
                    }
                    if(index == 3){
                        $('.section3').find('p').delay(500).animate({
                            bottom:'-120%'
                        },500,'easeOutExpo');
                    }
                    if(index == 4){
                        $('.section4').find('p').fadeOut(2000);
                    }
                }
        });
    });
    </script>

这是实现的效果:

参考：http://www.bootcdn.cn/fullPage.js/readme/