06-移動端開發教程-fullpage框架

時間 2019-11-10

原文原文鏈接

CSS3的新特性已經講完了，接下來咱們看一下jQuery的一個全屏jQuery全屏滾動插件fullPage.js。咱們常常見到一些全屏的特絢麗頁面，手指或者鼠標滑動一下就是一整屏切換，並且還有各類效果。好比：全屏滑動案例javascript

下面咱們就介紹一下jQuery的fullPage.js的如何使用及經常使用的配置。css

1. fullpage.js的主要功能

fullPage.js是一個基於jquery的插件，它能很方便的製做出全屏網站，github地址。html

主要功能有：前端

支持鼠標滾動。
支持先後退和鍵盤控制。
多個回調函數。
支持手機，平板觸摸事件。
支持css3動畫。
支持窗口縮放。
窗口縮放時自動調整。
可設置滾動寬度，背景顏色，滾動速度，循環選項，回調，文本對齊方式等。

2. fullpage.js的使用

2.1 兼容性

fullpage.js是jQuery的插件，須要依賴jQuery，要求jQuery最低的版本是1.6+。瀏覽器能兼容到ie8+及其餘現代瀏覽器。java

2.2 下載fullpage.js

第一種方法：直接下載壓縮包，地址jquery

第二種方法：使用前端的包管理工具css3

// With bower
bower install fullpage.js

// With npm
npm install fullpage.js

第三種： CDNJS地址:https://cdnjs.com/libraries/fullPage.jsgit

2.3 引入文件及文件依賴關係

fullpage.js插件依賴：fullpage的css文件，jQuery，若是設置了options中css3: false*，若是你用除了jQuery的默認linear 和swing緩動的效果以外的緩動效果的話，須要添加 jQuery UI library。github

引入依賴的文件，注意順序！web

<!--引入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>