jQuery的一個(gè)全屏jQuery全屏滾動(dòng)插件fullPage.js。我們經(jīng)常見(jiàn)到一些全屏的特絢麗頁(yè)面，手指或者鼠標(biāo)滑動(dòng)一下就是一整屏切換，而且還有各種效果。
下面我們就介紹一下jQuery的fullPage.js的如何使用及常用的配置。
1. fullpage.js的主要功能
fullPage.js是一個(gè)基于jquery的插件，它能很方便的制作出全屏網(wǎng)站，github地址。
主要功能有：
- 支持鼠標(biāo)滾動(dòng)。
- 支持前后退和鍵盤控制。
- 多個(gè)回調(diào)函數(shù)。
- 支持手機(jī)，平板觸摸事件。
- 支持css3動(dòng)畫。
- 支持窗口縮放。
- 窗口縮放時(shí)自動(dòng)調(diào)整。
- 可設(shè)置滾動(dòng)寬度，背景顏色，滾動(dòng)速度，循環(huán)選項(xiàng)，回調(diào)，文本對(duì)齊方式等。
2. fullpage.js的使用
2.1 兼容性
fullpage.js是jQuery的插件，需要依賴jQuery，要求jQuery最低的版本是1.6+。瀏覽器能兼容到ie8+及其他現(xiàn)代瀏覽器。
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 引入文件及文件依賴關(guān)系
fullpage.js插件依賴：fullpage的css文件，jQuery，如果設(shè)置了options中css3: false*，如果你用除了jQuery的默認(rèn)linear 和swing緩動(dòng)的效果之外的緩動(dòng)效果的話，需要添加 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瀏覽器或者設(shè)置了css3: false 那么需要引入jQuery的easing緩動(dòng)插件，默認(rèn)可以省略就行了。 -->
<script src="vendors/jquery.easings.min.js"></script>
<!--引入jQuery的插件fullpage.js核心文件-->
<script type="text/javascript" src="jquery.fullPage.js"></script>
2.4 編寫頁(yè)面結(jié)構(gòu)
編寫html的頁(yè)面結(jié)構(gòu)，每個(gè)section獨(dú)占一屏幕，默認(rèn)顯示第一屏。
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
<div class="section">第四屏</div>
</div>
如果需要從非第一屏開始顯示，則需要給對(duì)應(yīng)的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的初始化的設(shè)置
在初始化全屏插件的時(shí)候，有很多設(shè)置項(xiàng)。如下所示：
$(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){}
});
});
哇有很多設(shè)置項(xiàng)，還有事件處理程序。
他們的詳細(xì)介紹如下：
- 選項(xiàng)
| 選項(xiàng) | 類 型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| verticalCentered | 字符串 | true | 內(nèi)容是否垂直居中 |
| resize | 布爾值 | false | 字體是否隨著窗口縮放而縮放 |
| slidesColor | 函數(shù) | 無(wú) | 設(shè)置背景顏色 |
| anchors | 數(shù)組 | 無(wú) | 定義錨鏈接 |
| scrollingSpeed | 整數(shù) | 700 | 滾動(dòng)速度，單位為毫秒 |
| easing | 字符串 | easeInQuart | 滾動(dòng)動(dòng)畫方式 |
| menu | 布爾值 | false | 綁定菜單，設(shè)定的相關(guān)屬性與 anchors 的值對(duì)應(yīng)后，菜單可以控制滾動(dòng) |
| navigation | 布爾值 | false | 是否顯示項(xiàng)目導(dǎo)航 |
| navigationPosition | 字符串 | right | 項(xiàng)目導(dǎo)航的位置，可選 left 或 right |
| navigationColor | 字符串 | #000 | 項(xiàng)目導(dǎo)航的顏色 |
| navigationTooltips | 數(shù)組 | 空 | 項(xiàng)目導(dǎo)航的 tip |
| slidesNavigation | 布爾值 | false | 是否顯示左右滑塊的項(xiàng)目導(dǎo)航 |
| slidesNavPosition | 字符串 | bottom | 左右滑塊的項(xiàng)目導(dǎo)航的位置，可選 top 或 bottom |
| controlArrowColor | 字符串 | #fff | 左右滑塊的箭頭的背景顏色 |
| loopBottom | 布爾值 | false | 滾動(dòng)到最底部后是否滾回頂部 |
| loopTop | 布爾值 | false | 滾動(dòng)到最頂部后是否滾底部 |
| loopHorizontal | 布爾值 | true | 左右滑塊是否循環(huán)滑動(dòng) |
| autoScrolling | 布爾值 | true | 是否使用插件的滾動(dòng)方式，如果選擇 false，則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條 |
| scrollOverflow | 布爾值 | false | 內(nèi)容超過(guò)滿屏后是否顯示滾動(dòng)條 |
| css3 | 布爾值 | false | 是否使用 CSS3 transforms 滾動(dòng) |
| paddingTop | 字符串 | 0 | 與頂部的距離 |
| paddingBottom | 字符串 | 0 | 與底部距離 |
| fixedElements | 字符串 | 無(wú) | |
| normalScrollElements | 無(wú) | ||
| keyboardScrolling | 布爾值 | true | 是否使用鍵盤方向鍵導(dǎo)航 |
| touchSensitivity | 整數(shù) | 5 | |
| continuousVertical | 布爾值 | false | 是否循環(huán)滾動(dòng)，與 loopTop 及 loopBottom 不兼容 |
| animateAnchor | 布爾值 | true |
- 事件
| 名稱 | 說(shuō)明 |
|---|---|
| afterLoad | 滾動(dòng)到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個(gè)參數(shù)，anchorLink 是錨鏈接的名稱，index 是序號(hào)，從1開始計(jì)算 |
| onLeave | 滾動(dòng)前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個(gè)參數(shù)：index 是離開的“頁(yè)面”的序號(hào)，從1開始計(jì)算； |
| nextIndex | 是滾動(dòng)到的“頁(yè)面”的序號(hào)，從1開始計(jì)算； |
| direction | 判斷往上滾動(dòng)還是往下滾動(dòng)，值是 up 或 down。 |
| afterRender | 頁(yè)面結(jié)構(gòu)生成后的回調(diào)函數(shù)，或者說(shuō)頁(yè)面初始化完成后的回調(diào)函數(shù) |
| afterSlideLoad | 滾動(dòng)到某一水平滑塊后的回調(diào)函數(shù)，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個(gè)參數(shù) |
| onSlideLeave | 某一水平滑塊滾動(dòng)前的回調(diào)函數(shù)，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個(gè)參數(shù) |
案例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>
<!--另外不能在初始化的設(shè)置：lazyLoading: true ,不能為false-->
案例2：設(shè)置不同屏的背景色
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
4. fullpage的方法
| 名稱 | 說(shuō)明 |
|---|---|
| moveSectionUp() | 向上滾動(dòng) |
| moveSectionDown() | 向下滾動(dòng) |
| moveTo(section, slide) | 滾動(dòng)到 |
| moveSlideRight() | slide 向右滾動(dòng) |
| moveSlideLeft() | slide 向左滾動(dòng) |
| setAutoScrolling() | 設(shè)置頁(yè)面滾動(dòng)方式，設(shè)置為 true 時(shí)自動(dòng)滾動(dòng) |
| setAllowScrolling() | 添加或刪除鼠標(biāo)滾輪/觸控板控制 |
| setKeyboardScrolling() | 添加或刪除鍵盤方向鍵控制 |
| setScrollingSpeed() | 定義以毫秒為單位的滾動(dòng)速度 |
例如：
$('#moveSectionUp').click(function(e){
e.preventDefault();
$.fn.fullpage.moveSectionUp();
});
- 配合animate.css實(shí)現(xiàn)動(dòng)態(tài)效果案例
首先說(shuō)明animate.css本身就有兼容問(wèn)題，ie9+瀏覽器可以無(wú)視，另外考慮到手機(jī)的性能，移動(dòng)端盡量不要使用大量動(dòng)畫。
一般情況下都是用戶進(jìn)入某個(gè)屏的時(shí)候，動(dòng)畫開始啟動(dòng)入場(chǎng)，離開的時(shí)候啟動(dòng)出場(chǎng)（可以省略），然后下一屏開始入場(chǎng)。配合animate.css的問(wèn)題，animate的動(dòng)畫添加上animated樣式和具體的動(dòng)畫類型才會(huì)具有動(dòng)畫效果。如果一開始全設(shè)置好了那么只有第一屏有動(dòng)畫效果，不是我們想要的結(jié)果。
配合fullpage的onLeave事件，可以實(shí)現(xiàn)在上一屏離開的時(shí)候，給下一屏添加動(dòng)畫樣式類，并把上一屏的動(dòng)畫樣式類去掉。動(dòng)畫樣式類可以提前記錄在一個(gè)數(shù)組中或者是放到動(dòng)畫元素的自定義屬性中。例如代碼：
<div id="fullpage">
<div class="section s1">
<h3 class="sec-title amt amt-delay-3 lightSpeedIn" amt="lightSpeedIn">人工智能時(shí)代，學(xué)習(xí)編程讓孩子不一樣的未來(lái)！</h3>
<div class="img-list amt amt-delay-6 bounceInUp" amt="bounceInUp">
<img data-src="./img/s1-1.png" alt="孩子的未來(lái)">
<img data-src="./img/s1-2.jpg" alt="孩子的未來(lái)">
<img data-src="./img/s1-3.jpg" alt="孩子的未來(lái)">
</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（創(chuàng)造）：通過(guò)創(chuàng)造現(xiàn)實(shí)結(jié)合起來(lái)；</li>
<li class="s2-l-item">play（動(dòng)手玩）：親自動(dòng)手創(chuàng)作項(xiàng)目；</li>
<li class="s2-l-item">share（分享）：項(xiàng)目分享給其他人；</li>
<li class="s2-l-item">reflect（反思）：對(duì)項(xiàng)目的反思和改進(jìn)。</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>
