學習fullpage.js外掛實現滾屏心得
阿新 • • 發佈：2019-02-15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>fullpage</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Jesse">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script>
</head>
<body>
<!-- <ul id="fullpageMenu" style="position:fixed;top:100px;right:20px;z-index:999;">
<li data-menuanchor="page1" class="active"><a href="#page1">1</a></li>
<li data-menuanchor="page2" ><a href="#page2">2</a></li>
<li data-menuanchor="page3"><a href="#page3">3</a></li>
<li data-menuanchor="page4" ><a href="#page4">4</a></li>
<li data-menuanchor="page5" ><a href="#page5">5</a></li>
</ul> -->
<div id="header" style="position:fixed;top:20px;right:20px;font-size: 30px;color:#fff;">123</div>
<div id="fullpage">
<div class="section">section1</div>
<div class="section">section2</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide active"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
<div class="section">section4</div>
<div class="section">section5</div>
</div>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
//配置項介紹
//sectionsColor為每個section設定background-color屬性
sectionsColor:['green','orange','gray','red','yellow'],
//controlArrows定義是否通過箭頭來控制slide,預設true
controlArrows:false,
//verticalCentered定義每一頁的內容是否垂直居中，預設true
verticalCentered:false,
//resize字型是否隨視窗縮放而縮放，預設false
resize:true,
//scrollingSpeed設定滾動速度，單位毫秒，預設700
scrollingSpeed:1000,
//anchors定義錨鏈接，預設為[],定義錨鏈接時，值不要和頁面中的任何ID或name相同，且不需要加#
anchors:['page1','page2','page3','page4','page5'],
//lockAnchors是否鎖定錨鏈接，預設為false,設為true後連結地址不會改變
// lockAnchors:true,
//easing定義頁面section滾動的動畫方式，預設為easeInOutCubic,若修改此項需引入jquery.easing外掛
//css3是否使用CSS3 transforms來實現滾動效果，預設為true。若瀏覽器不支援CSS3，則會用Jquery來實現
//css3:false,
//loopTop滾動到最頂部後是否連續滾動到底部，預設為false
//loopBottom滾動到最低部後是否連續滾動到頂部，預設為false
//loopHorizontal橫向slide幻燈片是否迴圈滾動，預設為true
//autoScrolling是否使用外掛的滾動方式，預設為true,若為false則會出現瀏覽器自帶滾動條
//scrollBar是否包含滾動條，預設為false,若為true瀏覽器自帶滾動條出現
//paddingTop/paddingBottom設定每一個section頂部和底部的padding,預設為0
//fixedElements固定元素，預設為null,需要配置一個jquery選擇器，在頁面滾動時，fixElements設定的元素不滾動
fixedElements:"#header",
//keyboardScrolling是否可以使用鍵盤方向鍵導航，預設為true
//touchSensitivity在移動裝置中滑動頁面的敏感性，預設為5最高100，越大越難滑動
//continousVertical是否迴圈滾動，預設為false,注意這個屬性和loopTop loopBottom不相容，不能同時設定
//animateAnchor錨鏈接是否可以控制滾動動畫，預設為true,若為false則錨鏈接定位失效
//recordHistory是否記錄歷史，預設為true,通過瀏覽器的前進後退來導航。若設定autoScrolling:false,那麼這個屬性將被關閉
//menu繫結選單，設定的相關屬性與anchors的值對應後，選單可以控制滾動條，預設為false。可設定為選單的jquery選擇器
//menu:"#fullpageMenu",
//navigation是否顯示導航，預設為false
navigation:true,
//navigationPosition導航小圓點的位置
navigationPosition:"right",
//navigationTooltips導航小圓點的提示，注意按順序設定
navigationTooltips:['page1','page2','page3','page4','page5'],
//showActiveTooltip是否顯示當前頁面的tooltip資訊，預設為false
//slidesNavigation 是否顯示橫向幻燈片的導航，預設為false
slidesNavigation:true,
//slidesNavPosition橫向導航的位置，預設為bottom，可以設定為top或bottom
slidesNavPositon:"top",
//scrollOverflow內容超過滿屏後是否顯示滾動條，預設為false,如果為true則會顯示滾動條，若需滾動檢視內容還需要jquery.slimscroll外掛的配合
//sectionSelector:section選擇器。預設為.section
//slideSelector:slide選擇器，預設為.slide
//方法介紹
//$.fn.fullpage.***()
//moveSectionUp()向上滾動一頁
//moveSectionDown()向下滾動一頁
//moveTo(section,slide)section從1開始，slide從0開始
//silentMoveTo(section,slide)和moveTo一樣，但是沒有滾動效果
//moveSlideRight()幻燈片向右滾動
//moveSlideLeft()幻燈片向左滾動
//setAutoScrolling(boolean):動態設定autoScrolling
//setLockAnchors(boolean):動態設定lockAnchors
//setRecordHistory(boolean):動態設定recordHistory
//setScrollingSpeed(milliseconds):動態設定scrollingSpeed
//destory(type)銷燬fullpage,type可以不寫或者使用all
//reBuild()重新更新頁面和尺寸，用於ajax請求改變頁面結構後重建效果
//lazyLoading
});
});
</script>
</body>
</html>