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詳解