【轉載】fullpage.js學習

標籤：操作   ima   控制   web   元素   end   縮放   over   資訊   

參考網址：http://www.dowebok.com/77.html  上面有詳細介紹及案例展示，很不錯哦，可以先去看看demo

　　一、簡介

　　　fullPage.js 是一個基於jQuery的外掛程式，它能夠很方便、很輕鬆的製作出全屏網站，主要功能有：

　　　　1.支援滑鼠滾動　　　　2.多個回呼函數　　　　3.支援手機、平板觸屏事件　　　　4.支援css3動畫　　　　5.支援視窗縮放　　　　6.視窗縮放時自動調整　　　　7.可設定滾動寬度、背景顏色、捲動速度、迴圈選項、回調、文本對齊等

　　二、擷取方式：

　　    github首頁：https://github.com/alvarotrigo/fullPage.js　　　　三、相容性及大小、版本　　　　1.支援所有主流瀏覽器，除IE6、IE7　　　　2.僅7kb　　　　3.最新版本是V2.6.7

　　四、如何使用：

　　　　1、引入相關檔案　　　　　　css檔案：jquery.fukkPage.css　　　　　　jquery檔案：1.6以上版本即可　　　　　　easing檔案：jquery.easing.js，支援更多動畫過渡效果的外掛程式,可選的，非必須　　　　　　fullPage檔案：jquery.fullPage.js　　　　　　注意：　　　　　　　　可以使用cdn上的檔案，而非本地檔案，當部署到自己網站時，可以減輕自己伺服器的壓力，提高使用者的訪問速度　　　　　　　　可到 https://cdnjs.com 上去搜尋fullPage，該網cdn上的fullPage.js版本是最新的　　　　2、頁面的基本結構　　　　

<div id="fullpage">   <div class="section"> //每一個session對應一個頁面       <div class="slide">slide1</div>//可以給每個頁面加slide投影片       <div class="slide">slide2</div>       <div class="slide">slide3</div>   </div>   <div class="section"><h1>這是第二屏</h1></div>   <div class="section">content</div></div>

 

　　　　3、要想啟用fullpage效果，需要加入：　　　　

<script>  $(document).ready(function(){    $(‘#fullpage‘).fullpage();  })//在載入fullpage的時候引入fullpage方法。</script>

　　　五、配置項

　　　　1.sectionColor:

    　　  可以為每一個section設定background-color屬性。    　　　　例如：      　　　　$(‘#fullpage‘).fullpage({            　　　　sectionColor: [‘green‘,‘orange‘,‘gray‘,‘red‘];        　　　　});

　　　　2.controlArrows:

    　　定義是否通過箭頭來控制slide投影片，預設為true。當我們設定為false，則投影片左右兩側的的箭頭就會消失，在行動裝置上，我盟，可以通過滑動來操作投影片。

　　　　3.verticalCentered:

  　　　每一頁的內容是否垂直置中，預設為true。一般我們保持預設值

　　　　4.resize:

    　　 字型是否隨著視窗縮放而縮放，預設為false

　　　　5.scrollingSpeed:

     　　捲動速度，單位為毫秒，預設為700

　　　　6.anchors:

    　　   定義錨連結，預設值為[]。有了錨連結，使用者就可以快速開啟定位到某一頁面。    　　　注意定義錨連結的時候，值不要和頁面中任意id或name相同，尤其是在IE瀏覽器下，而且定義時不需要加#

　　　　7.lockAnchors:

    　　　是否鎖定錨連結，預設為false。如果設定為true，那麼定義的錨連結，也就是anchors屬性則沒有效果，這個配置項使用比較少

　　　　8.active：

　　　　在頁面中為某一個section添加了active之後，預設當視窗開啟時會定位到此active，顯示當前頁　　　　<div class="section active"></div>

　　　　9.easing:

　　　　　定義頁面section滾動的動畫方式，預設為easeInOutCubic，如果修改此項，需要引入jquery。easings外掛程式，或者jquery ui。

　　　　10.css3:

　　　　是否使用css3 transforms來實現滾動效果，預設為true。這個配置項可以提高支援css3的瀏覽器，比如行動裝置等的速度，如果瀏覽器不支援css3，則會使用jquery來替代css3實現滾動效果。即優雅降級，使用jquery實現動畫，一般來說，它的效能不如css動畫來得快。

　　　　11.loopTop:

　　　　滾動到最頂部後是否連續滾動到底部，預設為false。

　　　　12.loopBottom：

　　　　滾動到最底部後是否連續滾動回頂部，預設為false。

　　　　13.loopHorizontal：

　　　　橫向slider投影片是否迴圈滾動，預設為true。設定為false時，在第一個slider時，沒有向左滾動的箭頭，不能向左滾動。同理，最後一個slider時，沒有向右滾動的箭頭，不能向右滾動。

　　　　14.autoScrolling：

　　　　是否使用外掛程式的滾動方式，預設為true，如果選擇false，則會出現瀏覽器內建的捲軸，將不會按頁滾動，而是按照捲軸的預設行為來滾動。

　　　　15.scrollBar：

　　　　是否包含捲軸，預設為false，如果設定為true，則瀏覽器內建的捲軸出現，頁面滾動時還是按頁滾動，但是捲軸的預設行為也有效。

　　　　16.paddingTop/paddingBottom：

　　　　設定每一個section頂部和底部的padding，預設都為0.一般如果我們需要設定一個固定在頂部或者底部的菜單、導航、元素等，可以使用這兩個配置項。

　　　　17.fixedElements：

　　　　固定的元素，預設為null，需要配置一個jquery選取器。在頁面滾動的時候，fixedElements設定的元素固定不動。

 　　　18.keyboardScrolling：

　　　　是否可以使用鍵盤方向鍵導航，預設為true。

　　　　19.touchSensitivity：

　　　　在行動裝置中滑動頁面的敏感性，預設為5，是按百分比來衡量，最高為100，越大則越難滑動。

　　　　20.continuousVertical:

　　　　是否迴圈滾動，預設為false。如果設定為true，則頁面會迴圈滾動，而不像loopTop或loopBottom那樣出現跳動，注意這個屬性和loopTop、loopBottom不相容，不要同時設定。

　　　　21.animateAnchor：

　　　　錨連結是否可以控制滾動動畫，預設為true。如果設定為false，則通過錨連結定位到某個頁面顯示不再有動畫效果。

　　　　22..recordHistory:

　　　　是否記錄曆史，預設為true，可以記錄頁面滾動的曆史，通過瀏覽器的前進後退來導航。注意如果設定了autoScrolling：false，那麼這個配置也將被關閉，即設定為false。

　　　　23.menu：

　　　　綁定菜單，設定的相關屬性與anchors的值對應後，菜單可以控制滾動，預設為false。可以設定為菜單的jquery選取器

　　　　24..navigation:

　　　　是否顯示導航，預設為false。如果設定為true，會顯示小圓點，作為導航。

　　　　25.navigationPosition：

　　　　導航小圓點的位置，可以設定為left或right。

　　　　26.navigationTooltips:

　　　　導航小圓點的tooltips設定滑鼠經過時顯示的名字，預設為[]，注意按照順序設定。

　　　　27.showActiveTooltip：

　　　　是否顯示當前頁面的導航的tooltip資訊，預設為false

　　　　28.slidesNavigation：

　　　　是否顯示橫向投影片的導航，預設false。

　　　　29.slidesNavPosition：

　　　　橫向投影片導航的位置，預設為bottom，可以設定為top或bottom

　　　　30.scrollOverflow：

　　　　內容超過滿屏後是否顯示捲軸，預設為false。如果設定為true，則會顯示捲軸，如果要滾動查看內容，還需要jquery.slimscroll外掛程式的配合。

　　　　31.slimscroll：

　　　　外掛程式主要用於類比傳統的瀏覽器捲軸。

　　　　32.sectionSelector：

　　　　section的選取器，預設為.section。

　　　　33.slideSelector：

　　　　slide的選取器，預設為.slide。

　　六、方法

　　　　1.moveSectionUp():  

　　　　 向上滾動一頁

　　　　2.moveSectionDown(): 

　　　　 向下滾動一頁

　　　　3.moveTo(section,slide):

 　　　　滾動到第幾頁，第幾個投影片，注意，頁面是1開始，而投影片，是從0開始。

　　　　4.slientMoveTo(section,slide):

　　　　 滾動到第幾頁，和moveTo一樣，但是沒有動畫效果。

　　　　5.moveSlideRight():

　　　　 投影片向右滾動

　　　　6.moveSlideLeft():

 　　　　投影片向左滾動。

　　　　7.slientMoveTo(section,slide):

 　　　　滾動到第幾頁，和moveTo一樣，但是沒有動畫效果。

　　　　8.moveSlideRight():

 　　　　投影片向右滾動

　　　　9.moveSlideLeft():

　　　　 投影片向左滾動

　　　　10.setAutoScrolling(boolean):

　　　　 動態設定autoScrolling

　　　　11.setLockAnchors(boolean):

　　　　 動態設定lockAnchors

　　　　12.setRecordHistory(boolean):

　　　　 動態設定recordHistory

　　　　13.setScrollingSpeed(milliseconds):

　　　　 動態設定scrollingSpeed

　　　　14.setAllowScrolling(boolean,[directions]):

　　　　 添加或刪除滑鼠滾輪/滑動控制，第一個參數true為啟用，false為禁用，後面的參數為方向，取值包含all,up,down,left,right,可以使用多個，逗號分隔　　　　 比如我們在做一個有獎問答頁面，提問的問題在前面的頁面有答案，當滾動到最後一頁時，不希望使用者在滾動回之前的頁面查看答案，就可以使用這樣的方法。

　　　　15.destroy(type)

 　　　　銷毀fullpage特效，type可以不寫，或者使用all，不寫type，fullpaga給頁面添加的樣式和html元素還在，如果使用all，則樣式、html等全部銷毀，頁面恢複和不使用fullpage相同的效果。

　　　　16.reBuild()

 　　　　重新更新頁面和尺寸，用於通過ajax請求後改變了頁面結構之後，重建效果。　

　　七、fullPage支援消極式載入圖片和視頻（Lazy Loading）

　　　　1.圖片：　　　　<img daye-src="image.png">　　　　2.視頻：　　　　<video>   　　　　 <source data-src="video.webm" type="video/webm" />   　　　　 <source data-src="video.mp4" type="video/mp4" />　　　　</video> 

　　八、回呼函數

　　　　1.afterLoad(anchorLink,index)

　　　　滾動到某一section，且滾動結束後，會觸發一次此回呼函數，函數接受anchorLink和index兩個參數，anchorLink是錨連結的名稱，index是序號，從1開始計算。
　　　　我們可以根據anchorLink和index參數值的判斷，觸發相應的事件。

　　　　2.onleave(index,nextIndex,direction)

　　　　在我們離開一個section時，會觸發一次此回呼函數，接受index、nextIndex和direction 3個參數：
　　　　　　index是離開的“頁面”的序號，從1開始計算；
　　　　　　nextIndex是滾動到的目標“頁面”的序號，從1開始計算；
　　　　　　direction判斷往上滾動還是往下滾動，值是up或down。
　　　　通過return false；可以取消滾動

　　　　3.afterRender()

　　　　頁面結構產生後的回呼函數，或者說頁面初始化完成後的回呼函數。

　　　　4.afterResize()

　　　　瀏覽器視窗尺寸改變後的回呼函數

　　　　5.afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)

　　　　滾動到某一投影片後的回呼函數，與afterLoad類似，接受anchorLink、index、slidIndex、direction4個參數。

　　　　6.onSlideLeave(anchorLink，index，slideIndex，direction，nextSlideIndex)

　　　　在我們離開一個slide時，會觸發一次此回呼函數，與onLeave類似，接收anchorLink、index、slideIndex、direction4個參數 　　九、實現效果
　　　　.設計頁面
　　　　.準備文字和圖片素材
　　　　.按照設計實現基本的頁面效果
　　　　.實現動畫 　　十、Move.js　　　　1.set()方法用於設定元素的css屬性，他帶有兩個參數：css屬性和屬性值。
　　　　2.scale()方法用於放大或壓縮元素的大小，按照提供的每一個值，將調用transform的scale方法。
　　　　3.rotate(deg)方法通過提供的數值作為參數來旋轉元素。當方法被調用的時候通過附加到元素的transform屬性上。
　　　　4.eng()方法用於Move.js程式碼片段的結束，它標識動畫的結束。技術上，該方法觸發動畫的播放。該方法接受一個可選的callback回掉函數。

【轉載】fullpage.js學習