相容性:

1. 支援 IE8+ 及其他現代瀏覽器。

主要功能：

1.支援滑鼠滾動；

2.支援前進後退鍵盤控制;

3.多個回撥函式;

4.支援手機.移動裝置;

5.支援視窗縮放自動調整;

6.可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊方式等等;

7.支援CSS3動畫;

github下載地址：https://github.com/alvarotrigo/fullPage.js

滾屏裡面的效果，都是寫在回撥函式中的；

配置表:

1.選項

2.方法：

• moveSectionUp() 向上滾動
• moveSectionDown() 向下滾動
• moveTo(section, slide) 滾動到
• moveSlideRight() slide 向右滾動
• moveSlideLeft() slide 向左滾動
• setAutoScrolling() 設定頁面滾動方式，設定為 true 時自動滾動
• setAllowScrolling() 新增或刪除滑鼠滾輪/觸控板控制
• setKeyboardScrolling()新增或刪除鍵盤方向鍵控制
• setScrollingSpeed() 定義以毫秒為單位的滾動速度

3、回撥函式

$(function(){
    //fullpage.js全屏滾動外掛效果；
    $('#dowebok').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        //滾動到某一屏後呼叫js程式碼
        afterLoad: function(anchorLink, index){
            if(index == 2){
                //進入第二個頁面左邊的div出現的效果；
                $('.animation_effect .left').delay(500).animate({
                    width: '60%'
                }, 1500, 'easeOutExpo');
                //進入第二個頁面右邊三個div出現的效果；
                $('.animation_effect .top,.animation_effect .center,.animation_effect .bottom').delay(500).animate({
                    width:'40%'
                },1500,'easeOutExpo');
                //滑鼠進入左邊的div，左邊的div和右邊三個div寬度發生變化；
                $('.animation_effect .left').mouseover(function(){
                    $(this).stop().animate({
                        width:'69%'
                    },1500, 'easeOutExpo');
                    $('.animation_effect .top,.animation_effect .center,.animation_effect .bottom').stop().animate({
                        width:'31%'
                    },1500,'easeOutExpo')
                });
                //滑鼠離開左邊的div，左邊div和右邊div寬度發生變化；
                $('.animation_effect .left').mouseout(function(){
                    $(this).stop().animate({
                        width:'60%'
                    },1500, 'easeOutExpo');
                    $('.animation_effect .top,.animation_effect .center,.animation_effect .bottom').stop().animate({
                        width:'40%'
                    },1500,'easeOutExpo')
                });
                //滑鼠在左邊的left的div中指定的座標內移動的時候；
                $('.left').mousemove(function(e){
                    //console.log(e.offsetX +":" + e.offsetY)
                    if(e.offsetX>460){
                        //$('.animation_effect .left').stop().animate({
                        //    width:'69-460'+e.offsetX+'%'
                        //},1500, 'easeOutExpo');
                        console.log("dasfaf")

                    }
                })
                //滑鼠進入右邊的三個div，四個div出現的效果
                $('.animation_effect .top,.animation_effect .center,.animation_effect .bottom').mouseover(function(){
                    $('.animation_effect .top,.animation_effect .center,.animation_effect .bottom').stop().animate({
                        width:'49%'
                    },1500,'easeOutExpo');
                    $('.animation_effect .left').stop().animate({
                        width:'51%'
                    },1500, 'easeOutExpo');
                })
                //滑鼠離開右邊的三個div，四個div出現的效果；
                $('.animation_effect .top,.animation_effect .center,.animation_effect .bottom').mouseout(function(){
                    $('.animation_effect .top,.animation_effect .center,.animation_effect .bottom').stop().animate({
                        width:'40%'
                    },1500,'easeOutExpo');
                    $('.animation_effect .left').stop().animate({
                        width:'60%'
                    },1500, 'easeOutExpo');
                })
            }
            //當頁面在首頁的時候，點選視訊關閉按鈕，出現的效果；
            if(index == 1){
            
            }
            if(index == 4){
                $('.section4').find('p').fadeIn(2000);
            }
        },
        //滾動到某一屏前，或者這一螢幕滾動過後執行的js程式碼；
        onLeave: function(index, direction){
            if(index == '2'){
                $('.left').delay(450).animate({
                    width: '100%'
                }, 1500, 'easeOutExpo');
                $('.top,.center,.bottom').delay(450).animate({
                    width:'0'
                },1500,'easeOutExpo')
            }
            if(index == '3'){
                $('.section3').find('p').delay(500).animate({
                    bottom: '-120%'
                }, 1500, 'easeOutExpo');
            }
            if(index == '4'){
               $('.section4').find('p').fadeOut(2000);
            }
        }
    });
});