fullpage插件基本應用

時間 2019-12-07

原文原文鏈接

介紹：

fullpage.js是一個基於jQuery的插件，它可以很方便、很輕鬆的製做出全屏網站。css

主要功能：支持鼠標滾動、多個回調函數、支持手機、平板觸摸事件、支持css3動畫、支持窗口縮放、窗口縮放自動調整、可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等html

使用準備：

引入fullpage的css樣式：jquery

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

引入fullpage的js：css3

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

引入jQuery：ajax

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

最終效果：

全部代碼：

<!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的板塊是一張幻燈片bash

經常使用配置項：

1.激活fullpagecss3動畫

$('#fullpage').fullpage({

});複製代碼

2.sectionColor：爲每個section設置背景色，ide

3.anchors：定義錨連接，默認值爲[]。有了錨連接，用戶就能夠快速打開定位到某一頁面。函數

4.loopTop：滾動到最頂部後是否連續滾動到底部，默認爲false。oop

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):滾動到某頁某個幻燈片

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。