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

17-06-12 来源：[db:作者]
收藏我要投稿
1. 该demo实现了全屏翻页，根据顶部导航翻页，侧边栏翻页等

2. 添加了水平翻页，添加水平导航，并去除水平箭头(太难看，不能忍)

3.配合fullpage的回调函数，运用move.js对文字和图片添加了包括放大、移动、旋转在内的动画效果

<!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>


<p id="fullpage">

    <p class="section section1">

        <h1>这是测试</h1>

        <p>测试内容，这是一个简单文本</p>

    </p>

    <p class="section section2">

        <h1>文本</h1>

    </p>

    <p class="section section3">

        <h1>测试</h1>

        <p>测试内容</p>

    </p>

    <p class="section section4">

        <img src="csdn.jpg" title="" alt="无法正常显示" width="300px" class="per">

        <h1>头像</h1>

    </p>

    <p class="section section5">

            <p class="slide">123</p>

            <p class="slide">456</p>

            <p class="slide">789</p>

            <p class="slide">741</p>

    </p>

</p>


<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>
点击复制链接与好友分享!回本站首页