fullpage外掛基本應用

Winter_Wang發表於2019-01-27

介紹：

fullpage.js是一個基於jQuery的外掛，它能夠很方便、很輕鬆的製作出全屏網站。

主要功能：支援滑鼠滾動、多個回撥函式、支援手機、平板觸控事件、支援css3動畫、支援視窗縮放、視窗縮放自動調整、可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊方式等

使用準備：

引入fullpage的css樣式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css">複製程式碼

引入fullpage的js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>複製程式碼

引入jQuery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>複製程式碼

最終效果：

fullpage外掛基本應用

所有程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>fullpage</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css">
    <style>
        .slide{
            text-align: center;
        }
        #header{
            position: fixed;
            top: 0;
            left: 50%;
            color: white;
        }
        #fullpageMenu{
            position: fixed;
            top:0;
            z-index: 999;
        }
        #fullpageMenu a{
            color: white;
        }
    </style>
</head>
<body>
<ul id="fullpageMenu">
    <li data-menuanchor="page1" class="active"><a href="#page1">1 section</a></li>
    <li data-menuanchor="page2"><a href="#page2">2 section</a></li>
    <li data-menuanchor="page3"><a href="#page3">3 section</a></li>
    <li data-menuanchor="page4"><a href="#page4">4 section</a></li>
</ul>
<div id="fullpage">
    <header id="header"><h2>header</h2></header>
    <!--類名active自動定位到某個頁面-->
    <div class="section"><h1>這是第一屏</h1></div>
    <div class="section">
        <div class="slide">slide1</div>
        <div class="slide">slide2</div>
        <div class="slide">slide3</div>
        <div class="slide">slide4</div>
    </div>
    <div class="section"><h1>這是第三屏</h1></div>
    <div class="section"><h1>這是第四屏</h1></div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<script>
    //頁面開始時啟用fullpage
    $(document).ready(function () {
        $('#fullpage').fullpage({
            //section的背景色設定
            sectionsColor:['#282c34','#e4393b','yellowgreen','rebeccapurple'],
            // controlArrows:falsecontrolArrows:false
            //verticalCentered:false
            //頁面滾動速度
            //scrollingSpeed:1500
            anchors:['page1','page2','page3','page4'],
            //loopTop:true,
            //頁面滾動到底部是否回到第一屏
            loopBottom:true,
           // loopHorizontal:true
            fixedElements:"#header",
            menu:'#fullpageMenu',
            navigation:true,
            navigationPosition:'right',
            navigationTooltips:['page1','page2','page3','page4'],
            scrollOverflow:true,
            afterLoad:function (anchorLink,index) {
                console.log("afterLoad:anchorLink="+anchorLink
                +";index="+index
                );
            }
        });
    })
</script>複製程式碼

模組解釋：

class是section的板塊是一頁，class是slide的板塊是一張幻燈片

常用配置項：

1.啟用fullpage

$('#fullpage').fullpage({

});複製程式碼

2.sectionColor：為每一個section設定背景色，

3.anchors：定義錨連結，預設值為[]。有了錨連結，使用者就可以快速開啟定位到某一頁面。

4.loopTop：滾動到最頂部後是否連續滾動到底部，預設為false。

5.loopBottom：滾動到最底部後是否連續滾動回頂部，預設為false。

6.fixedElements：設定固定元素，如底部和頂部導航等。

7.recordHistory：是否記錄歷史，預設為true。

8.menu:繫結選單。

9.navigation：是否顯示導航，預設為false，設定為true，會顯示小圓點。

10.navigationPosition：導航小圓點的位置，left或right。

11.navigationTooltips：小圓點的文字提示設定。

常用方法：

1.moveSectionU():向上滾動一頁

2.moveSectionDown(): 向下滾動一頁

3.moveTo(section,slide):滾動到某頁某個幻燈片


相關文章