fullpage:全屏翻页，顶部导航，水平导航demo

1. 该demo实现了全屏翻页，根据顶部导航翻页，侧边栏翻页等
2. 添加了水平翻页，添加水平导航，并去除水平箭头（太难看，不能忍）
3.配合fullpage的回调函数，运用move.js对文字和图片添加了包括放大、移动、旋转在内的动画效果

demo实际效果点这里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css" />

    <style>
        body{text-align: center;color: #FFFFFF;}
        #fullpageMenu{
            position: fixed;
            top: 0;
            z-index: 999;
        }
        #fullpageMenu li{float: left;display: inline-table;}
        .section3 h1{margin-left: 10%;opacity: 0.5}
        .section3 p{margin-right: 10%;opacity: 0.5}
    </style>
</head>
<body>

<ul id="fullpageMenu">
    <li><a href="#page1">1</a></li>
    <li><a href="#page2">2</a></li>
    <li><a href="#page3">3</a></li>
    <li><a href="#page4">4</a></li>
    <li><a href="#page5">5</a></li>
</ul>

<div id="fullpage">
    <div class="section section1">
        <h1>这是测试</h1>
        <p>测试内容，这是一个简单文本</p>
    </div>
    <div class="section section2">
        <h1>文本</h1>
    </div>
    <div class="section section3">
        <h1>测试</h1>
        <p>测试内容</p>
    </div>
    <div class="section section4">
        <img src="csdn.jpg" title="" alt="无法正常显示" width="300px" class="per">
        <h1>头像</h1>
    </div>
    <div class="section section5">
            <div class="slide">123</div>
            <div class="slide">456</div>
            <div class="slide">789</div>
            <div class="slide">741</div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/vendors/scrolloverflow.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.js"></script>

<script>
    $(function () {
        $('#fullpage').fullpage({
            sectionsColor:['#FEDA89','#DE4F50','#904A68','#68C39F','#F05183'],
            anchors:['page1','page2','page3','page4','page5'],
            navigation:'true',//导航
            navigationPosition:'right',//导航位置
            navigationTooltips:['1','2','3','4','5'],//标记
            showActiveTooltip:true,
            scrollOverflow:true,//超出滚动
            menu:'#fullpageMenu',
            slidesNavigation:true,//水平导航
            controlArrows: false,//隐藏水平箭头
            afterLoad:function (link,index) {
                switch (index){
                    case 1:
                        move('.section1 h1').scale(1.5).end();
                        move('.section1 p').set('margin-top','10%').end();
                        break;
                    case 2:
                        move('.section2 h1').scale(0.8).end();
                        break;
                    case 3:
                        move('.section3 h1').set('margin-right','10%').end();
                        move('.section3 p').set('margin-left','10%').end();
                        $('.section3 h1').css('opacity','1');
                        $('.section3 p').css('opacity','1');
                        break;
                    case 4:
                        move('.section4 img').rotate(360).end(function () {
                            move('.section4 h1').scale(0.8).end();
                        });
                        break;
                    default:break;
                }
            },
            onLeave:function (link,index) {
                switch (index){
                    case 1:
                        move('.section1 h1').scale(1).end();
                        move('.section1 p').set('margin-bottom','10%').end();
                        break;
                    case 2:
                        move('.section2 h1').scale(1).end();
                        break;
                    case 3:
                        move('.section3 h1').set('margin-right','-10%').end();
                        move('.section3 p').set('margin-left','-10%').end();
                        $('.section3 h1').css('opacity','0.5');
                        $('.section3 p').css('opacity','0.5');
                        break;
                    case 4:
//                        move('.section4 img').rotate(-360).end(function () {
//                            move('.section4 h1').scale(1).end();
//                        });
                        move('.section4 img.per').rotate(-360).end();
                        move('.section4 h1').scale(1).end();

                        break;
                    default:break;
                }
            }
        });
    });
</script>
</body>
</html>