全屏滚动插件FullPage

2017-11-18
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站：
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style/jquery.fullPage.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <style>
        #main{text-align: center}
        .s1{background-color: #CC9393}
        .s2{background-color: #00B83F}
        .s3{background-color: #00b3ee}
        .s4{background-color: #6c71c4}

        #menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
        #menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
        #menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
        #menu .active a { color: #fff; background-color: #333;}
        .section { overflow: hidden}

        .section .h3{
            position: relative;
            top:-1220px;
            transition: 0.5s 0.7s;
        }
        .section .p3{
            position: relative;
            left:-700px;
            transition: 0.5s 0.9s;
        }
        .section.active .h3{
            top:0;
        }
        .section.active .p3{
            left:0;
        }
    </style>
</head>
<body>
<ul id="menu">
    <li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
</ul>

<div id="main">
    <div class="section s1">
        <h3>第一屏</h3>
    </div>
    <div class="section s2">
        <div class="slide"><h3>第二屏的第一屏</h3></div>
        <div class="slide"><h3>第二屏的第二屏</h3></div>
        <div class="slide"><h3>第二屏的第三屏</h3></div>
    </div>
    <div class="section s3"style="position: relative">
        <h3 class="h3">第三屏</h3>
        <p class="p3" style="margin-top: 150px;">这是一个段落</p>
    </div>
    <div class="section s4">
        <h3>第四屏</h3>
    </div>
</div>
<script>
    $(function(){
        $('#main').fullpage({
            continuousVertical: true,//是否循环滚动，与 loopTop 及 loopBottom 不兼容
            'navigation': true,//是否显示项目圆点导航
             'navigationPosition':'right',//圆点导航方向默认为右边
            'navigationTooltips':['第一屏', '第二屏', '第三屏', '第四屏'],//导航的 tip提示
            anchors: ['page1', 'page2', 'page3', 'page4'],
            menu: '#menu' //绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
        });
        $(window).resize(function(){
            autoScrolling();
        });

        function autoScrolling(){
            var $ww = $(window).width();
            if($ww < 1024){
                $.fn.fullpage.setAutoScrolling(false);
            } else {
                $.fn.fullpage.setAutoScrolling(true);
            }
        }

        autoScrolling();

    });
</script>
</body>
</html>
中文文档地址
 fullPage.js GitHub 地址