fullPage教程 -- 整屏滾動效果插件 fullpage詳解

1、引用文件[html] view plain copy print?在CODE上查看代碼片派生到我的代碼片
<link rel="stylesheet" href="css/jquery.fullPage.css">  
<script src="js/jquery.min.js"></script>  
<script src="js/jquery-ui.min.js"></script>  
<script src="js/jquery.fullPage.js"></script>  

2、html部分[html] view plain copy print?在CODE上查看代碼片派生到我的代碼片
<div class="section">第一屏</div>  
<div class="section">第二屏</div>  
<div class="section">  
    <div class="slide">第三屏的第一屏</div>  
    <div class="slide">第三屏的第二屏</div>  
    <div class="slide">第三屏的第三屏</div>  
    <div class="slide">第三屏的第四屏</div>  
</div>  
<div class="section">第四屏</div>  

3、使用方法[javascript] view plain copy print?在CODE上查看代碼片派生到我的代碼片
$(document).ready(function() {  
    $.fn.fullpage({  
        slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],  
        anchors: ['page1', 'page2', 'page3', 'page4']  
    });  
});

4、詳細options參數
參數	類型	說明	默認值
verticalCentered	字符串	內容是否垂直居中	true
resize	布爾值	字體是否隨著窗口縮放而縮放	false
slidesColor	函數	設置背景顏色，如：	無
anchors	數組	定義錨鏈接	無
scrollingSpeed	整數	滾動速度，單位為毫秒	700
easing	字符串	滾動動畫方式	easeInQuart
menu	布爾值	綁定菜單，設定的相關屬性與 anchors 的值對應后，菜單可以控制滾動	false
navigation	布爾值	是否顯示項目導航	false
navigationPosition	字符串	項目導航的位置，可選 left 或 right	right
navigationColor	字符串	項目導航的顏色	#000
navigationTooltips	數組	項目導航的 tip	無
slidesNavigation	布爾值	是否顯示左右滑塊的項目導航	false
slidesNavPosition	字符串	左右滑塊的項目導航的位置，可選 top 或 bottom	bottom
controlArrowColor	字符串	左右滑塊的箭頭的背景顏色	#fff
loopBottom	布爾值	滾動到最底部后是否滾回頂部	false
loopTop	布爾值	滾動到最頂部后是否滾底部	false
loopHorizontal	布爾值	左右滑塊是否循環滑動	true
autoScrolling	布爾值	是否使用插件的滾動方式，如果選擇 false，則會出現瀏覽器自帶的滾動條	true
scrollOverflow	布爾值	內容超過滿屏后是否顯示滾動條	false
css3	布爾值	是否使用 JavaScript 或 CSS3 transforms 滾動	false
paddingTop	字符串	與頂部的距離	0
paddingBottom	字符串	與底部距離	0
fixedElements	字符串	 	無
normalScrollElements	 	 	無
afterLoad	函數	滾動到某一屏后的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算	無
onLeave	函數	滾動前的回調函數，接收 index 和 direction 兩個參數，index 是序號，從1開始計算，direction 判斷往上滾動還是往下滾動	無
afterRender	函數	頁面結構生成后的回調函數，或者說頁面初始化完成后的回調函數	無
afterSlideLoad	函數	滾動到某一水平滑塊后的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數	無
onSlideLeave	函數	某一水平滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數

本文為 H5EDU 機構官方 HTML5培訓 教程，主要介紹：fullPage教程 -- 整屏滾動效果插件 fullpage詳解