jQuery全屏滾動插件fullPage.js中文幫助文檔API

jQuery全屏滾動插件fullPage.js中文幫助文檔API

 

發現了一個fullPage.js插件，因而百度了一下，還就是這個插件的做用，其實有不少網站都作了全屏滾動的特效，效果也很好看，今天就給你們說說fullPage.js的使用方法和設置。

 

簡介

fullPage.js是一個基於jQuery的全屏滾動插件，它可以很方便、很輕鬆的製做出全屏網站

 

主要功能

支持鼠標滾動

支持前進後退和鍵盤控制

多個回調函數

支持手機、平板觸摸事件

支持 CSS3 動畫

支持窗口縮放

窗口縮放時自動調整

可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

兼容性

fullPage.js 支持 IE8+ 及其餘現代瀏覽器。

 

使用方法

1、引入文件

1 <linkrel="stylesheet"href="css/jquery.fullPage.css">
2 <scriptsrc="js/jquery.min.js"></script>
3 <scriptsrc="js/jquery-ui.min.js"></script>
4 <scriptsrc="js/jquery.fullPage.js"></script>

 

2、HTML

   1.整版的幻燈片放映

 

1 <divid="fullpage">
2 <divclass="section">Some section</div>
3 <divclass="section">Some section</div>
4 <divclass="section">Some section</div>
5 <divclass="section">Some section</div>
6 </div>

 

   2.若是你想定義一個不一樣的出發點，而不是一段或一部分的第一個幻燈片，只需添加active section類，並放在你想加載幻燈片位置前，

<div class="section active">Some section</div>

   3.爲了在一個幻燈片區域內創造另外橫向幻燈片，每一個幻燈片將定義另外一個div

 

1 <divclass="section">
2 <divclass="slide"> Slide 1 </div>
3 <divclass="slide"> Slide 2 </div>
4 <divclass="slide"> Slide 3 </div>
5 <divclass="slide"> Slide 4 </div>
6 </div>

 

You can see a fully working example of the HTML structure in the demoPage.html file.

 

3、JavaScript

 

1 $(document).ready(function(){
2 $.fn.fullpage({
3 slidesColor:[''#1bbc9b'',''#4BBFC3'',''#7BAABE'',''#f90''],
4 anchors:[''page1'',''page2'',''page3'',''page4'']
5 });
6 });

 

 

經測試，最好至少有 anchors 這個參數，不然在火狐瀏覽器中，第一次滾動會直接滾到底部。

 

配置

1、選項

選項         類型         默認值     說明

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

normalScrollElementTouchThreshold      整數         5     

 

2、方法

名稱         說明

moveSectionUp()     向上滾動

moveSectionDown()         向下滾動

moveTo(section, slide)     滾動到

moveSlideRight()      slide 向右滾動

moveSlideLeft()        slide 向左滾動

setAutoScrolling()    設置頁面滾動方式，設置爲 true 時自動滾動

setAllowScrolling()   添加或刪除鼠標滾輪/觸控板控制

setKeyboardScrolling()     添加或刪除鍵盤方向鍵控制

setScrollingSpeed()  定義以毫秒爲單位的滾動速度

 

3、回調函數

名稱         說明

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個參數