06-移動端開發教程-fullpage框架
CSS3的新特性已經講完了，接下來我們看一下jQuery的一個全屏jQuery全屏滾動外掛fullPage.js。我們經常見到一些全屏的特絢麗頁面，手指或者滑鼠滑動一下就是一整屏切換，而且還有各種效果。比如：全屏滑動案例
下面我們就介紹一下jQuery的fullPage.js的如何使用及常用的配置。
1. fullpage.js的主要功能
fullPage.js是一個基於jquery的外掛，它能很方便的製作出全屏網站，github地址。
主要功能有：
- 支援滑鼠滾動。
- 支援前後退和鍵盤控制。
- 多個回撥函式。
- 支援手機，平板觸控事件。
- 支援css3動畫。
- 支援視窗縮放。
- 視窗縮放時自動調整。
- 可設定滾動寬度，背景顏色，滾動速度，迴圈選項，回撥，文字對齊方式等。
2. fullpage.js的使用
2.1 相容性
fullpage.js是jQuery的外掛，需要依賴jQuery，要求jQuery最低的版本是1.6+。瀏覽器能相容到ie8+及其他現代瀏覽器。
2.2 下載fullpage.js
第一種方法： 直接下載壓縮包，地址
第二種方法： 使用前端的包管理工具
// With bower
bower install fullpage.js
// With npm
npm install fullpage.js第三種： CDNJS地址:https://cdnjs.com/libraries/fullPage.js
2.3 引入檔案及檔案依賴關係
fullpage.js外掛依賴：fullpage的css檔案，jQuery，如果設定了options中css3: false
linear 和swing緩動的效果之外的緩動效果的話，需要新增 jQuery UI library。
引入依賴的檔案，注意順序！
<!--引入fullpage.js外掛的樣式，必須--> <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 如果是ie8瀏覽器或者設定了css3: false 那麼需要引入jQuery的easing緩動外掛，預設可以省略就行了。 --> <script src="vendors/jquery.easings.min.js"></script> <!--引入jQuery的外掛fullpage.js核心檔案--> <script type="text/javascript" src="jquery.fullPage.js"></script>
2.4 編寫頁面結構
編寫html的頁面結構，每個section獨佔一螢幕，預設顯示第一屏。
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
<div class="section">第四屏</div>
</div>如果需要從非第一屏開始顯示，則需要給對應的section新增active樣式類即可。
<div class="section active">第三屏</div>2.5 編寫初始化的指令碼
$(function() {
$('#fullpage').fullpage();
});完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全屏外掛</title>
<link rel="stylesheet" href="./js/fullpage/jquery.fullpage.css">
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/fullpage/jquery.fullpage.min.js"></script>
</head>
<body>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
<script>
$(function () {
$('#dowebok').fullpage();
});
</script>
</body>
</html>3. fullpage的初始化的設定
在初始化全屏外掛的時候，有很多設定項。如下所示：
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
parallax: false,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});哇有很多設定項，還有事件處理程式。
他們的詳細介紹如下：
- 選項
選項 |
類 型 |
預設值 |
說明 |
|---|---|---|---|
verticalCentered |
字串 |
true |
內容是否垂直居中 |
resize |
布林值 |
false |
字型是否隨著視窗縮放而縮放 |
slidesColor |
函式 |
無 |
設定背景顏色 |
anchors |
陣列 |
無 |
定義錨鏈接 |
scrollingSpeed |
整數 |
700 |
滾動速度，單位為毫秒 |
easing |
字串 |
easeInQuart |
滾動動畫方式 |
menu |
布林值 |
false |
繫結選單，設定的相關屬性與 anchors 的值對應後，選單可以控制滾動 |
navigation |
布林值 |
false |
是否顯示專案導航 |
navigationPosition |
字串 |
right |
專案導航的位置，可選 left 或 right |
navigationColor |
字串 |
#000 |
專案導航的顏色 |
navigationTooltips |
陣列 |
空 |
專案導航的 tip |
slidesNavigation |
布林值 |
false |
是否顯示左右滑塊的專案導航 |
slidesNavPosition |
字串 |
bottom |
左右滑塊的專案導航的位置，可選 top 或 bottom |
controlArrowColor |
字串 |
#fff |
左右滑塊的箭頭的背景顏色 |
loopBottom |
布林值 |
false |
滾動到最底部後是否滾回頂部 |
loopTop |
布林值 |
false |
滾動到最頂部後是否滾底部 |
loopHorizontal |
布林值 |
true |
左右滑塊是否迴圈滑動 |
autoScrolling |
布林值 |
true |
是否使用外掛的滾動方式，如果選擇 false，則會出現瀏覽器自帶的滾動條 |
scrollOverflow |
布林值 |
false |
內容超過滿屏後是否顯示滾動條 |
css3 |
布林值 |
false |
是否使用 CSS3 transforms 滾動 |
paddingTop |
字串 |
0 |
與頂部的距離 |
paddingBottom |
字串 |
0 |
與底部距離 |
fixedElements |
字串 |
無 |
|
normalScrollElements |
無 |
||
keyboardScrolling |
布林值 |
true |
是否使用鍵盤方向鍵導航 |
touchSensitivity |
整數 |
5 |
|
continuousVertical |
布林值 |
false |
是否迴圈滾動，與 loopTop 及 loopBottom 不相容 |
animateAnchor |
布林值 |
true |
- 事件
名稱 |
說明 |
|---|---|
afterLoad |
滾動到某一屏後的回撥函式，接收 anchorLink 和 index 兩個引數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算 |
onLeave |
滾動前的回撥函式，接收 index、nextIndex 和 direction 3個引數：index 是離開的“頁面”的序號，從1開始計算； |
nextIndex |
是滾動到的“頁面”的序號，從1開始計算； |
direction |
判斷往上滾動還是往下滾動，值是 up 或 down。 |
afterRender |
頁面結構生成後的回撥函式，或者說頁面初始化完成後的回撥函式 |
afterSlideLoad |
滾動到某一水平滑塊後的回撥函式，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個引數 |
onSlideLeave |
某一水平滑塊滾動前的回撥函式，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個引數 |
案例1：延遲載入案例：
<!--圖片或者視訊的延遲載入, 只需要把src改成data-src -->
<img data-src="image.png">
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>
<!--另外不能在初始化的設定：lazyLoading: true ,不能為false-->案例2：設定不同屏的背景色
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});4. fullpage的方法
名稱 |
說明 |
|---|---|
moveSectionUp() |
向上滾動 |
moveSectionDown() |
向下滾動 |
moveTo(section, slide) |
滾動到 |
moveSlideRight() |
slide 向右滾動 |
moveSlideLeft() |
slide 向左滾動 |
setAutoScrolling() |
設定頁面滾動方式，設定為 true 時自動滾動 |
setAllowScrolling() |
新增或刪除滑鼠滾輪/觸控板控制 |
setKeyboardScrolling() |
新增或刪除鍵盤方向鍵控制 |
setScrollingSpeed() |
定義以毫秒為單位的滾動速度 |
例如：
$('#moveSectionUp').click(function(e){
e.preventDefault();
$.fn.fullpage.moveSectionUp();
}); - 配合animate.css實現動態效果案例
首先說明animate.css本身就有相容問題，ie9+瀏覽器可以無視，另外考慮到手機的效能，移動端儘量不要使用大量動畫。
一般情況下都是使用者進入某個屏的時候，動畫開始啟動入場，離開的時候啟動出場（可以省略），然後下一屏開始入場。配合animate.css的問題，animate的動畫新增上animated樣式和具體的動畫型別才會具有動畫效果。如果一開始全設定好了那麼只有第一屏有動畫效果，不是我們想要的結果。
配合fullpage的onLeave事件，可以實現在上一屏離開的時候，給下一屏新增動畫樣式類，並把上一屏的動畫樣式類去掉。動畫樣式類可以提前記錄在一個數組中或者是放到動畫元素的自定義屬性中。例如程式碼：
<div id="fullpage">
<div class="section s1">
<h3 class="sec-title amt amt-delay-3 lightSpeedIn" amt="lightSpeedIn">人工智慧時代，學習程式設計讓孩子不一樣的未來！</h3>
<div class="img-list amt amt-delay-6 bounceInUp" amt="bounceInUp">
<img data-src="./img/s1-1.png" alt="孩子的未來">
<img data-src="./img/s1-2.jpg" alt="孩子的未來">
<img data-src="./img/s1-3.jpg" alt="孩子的未來">
</div>
</div>
<div class="section s2">
<h3 class="sec-title amt amt-delay-3" amt="bounceInDown">我們的理念</h3>
<ul class="s2-l amt amt-delay-6" amt="slideInLeft">
<li class="s2-l-item">imagine（想象）：讓孩子去天馬行空；</li>
<li class="s2-l-item">create（創造）：通過創造現實結合起來；</li>
<li class="s2-l-item">play（動手玩）：親自動手創作專案；</li>
<li class="s2-l-item">share（分享）：專案分享給其他人；</li>
<li class="s2-l-item">reflect（反思）：對專案的反思和改進。</li>
</ul>
<div class="s2-r amt amt-delay-8" amt="slideInRight">
<img data-src="./img/s2-1.png" alt="少兒程式設計">
</div>
</div>
</div>
<script>
$(function () {
$('#fullpage').fullpage({
sectionsColor: ['rgba(88,185,156, 1)', '#fff', '#DE8910', '#0da5d6', 'rgb(235, 76, 67)', 'rgb(141, 127, 219)', 'rgb(227,135,88)','rgb(98,198,188)' ],
lazyLoading: true,
onLeave: function (index, nextIndex, direction) {
$('.section').find('.amt').each(function(index, elem) {
var amt = $(elem).attr('amt');
$(elem).removeClass(amt);
})
$('.section').eq(nextIndex-1).find('.amt').each(function(index, elem) {
var amt = $(elem).attr('amt');
$(elem).addClass(amt)
})
}
});
});
</script>fullpage.js + animate.css案例參考地址：案例