jquery.fullpage 全屏滾動

參考文檔 ：http://www.dowebok.com/77.html

下載地址： https://github.com/alvarotrigo/fullPage.js

 

1. 使用 

HTML

<div id="fullpage">
        <div class="section">這是第一個頁面</div>
        <div class="section">
            <div class="slide">Slide    1</div>
            <div class="slide">Slide    2</div>
            <div class="slide">Slide    3</div>
            <div class="slide">Slide    4</div>
        </div>
        <div class="section">這是第三個頁面</div>
        <!--active類定位到當前頁面-->
        <div class="section">這是第四個頁面</div>
</div>

JS

<script>
$(document).ready(function() {
    $('#fullpage').fullpage({
        //配置項介紹

        //sectionsColor爲每一個section設置background-color屬性
        sectionsColor:['green','orange','gray','red','yellow'],

        //controlArrows定義是否經過箭頭來控制slide,默認true
        controlArrows:false,

        //verticalCentered定義每一頁的內容是否垂直居中，默認true
        verticalCentered:false,

        //resize字體是否隨窗口縮放而縮放，默認false
        resize:true,

        //scrollingSpeed設置滾動速度，單位毫秒，默認700
        scrollingSpeed:1000,

        //anchors定義錨連接，默認爲[],定義錨連接時，值不要和頁面中的任何ID或name相同，且不須要加#
        anchors:['page1','page2','page3','page4','page5'],

        //lockAnchors是否鎖定錨連接，默認爲false,設爲true後連接地址不會改變
        // lockAnchors:true,

        //easing定義頁面section滾動的動畫方式，默認爲easeInOutCubic,若修改此項需引入jquery.easing插件

        //css3是否使用CSS3 transforms來實現滾動效果，默認爲true。若瀏覽器不支持CSS3，則會用Jquery來實現
        //css3:false,

        //loopTop滾動到最頂部後是否連續滾動到底部，默認爲false

        //loopBottom滾動到最低部後是否連續滾動到頂部，默認爲false

        //loopHorizontal橫向slide幻燈片是否循環滾動，默認爲true

        //autoScrolling是否使用插件的滾動方式，默認爲true,若爲false則會出現瀏覽器自帶滾動條    

        //scrollBar是否包含滾動條，默認爲false,若爲true瀏覽器自帶滾動條出現

        //paddingTop/paddingBottom設置每個section頂部和底部的padding,默認爲0

        //fixedElements固定元素，默認爲null,須要配置一個jquery選擇器，在頁面滾動時，fixElements設置的元素不滾動
        fixedElements:"#header",

        //keyboardScrolling是否能夠使用鍵盤方向鍵導航，默認爲true

        //touchSensitivity在移動設備中滑動頁面的敏感性，默認爲5最高100，越大越難滑動

        //continousVertical是否循環滾動，默認爲false,注意這個屬性和loopTop loopBottom不兼容，不能同時設置

        //animateAnchor錨連接是否能夠控制滾動動畫，默認爲true,若爲false則錨連接定位失效

        //recordHistory是否記錄歷史，默認爲true,經過瀏覽器的前進後退來導航。若設置autoScrolling:false,那麼這個屬性將被關閉

        //menu綁定菜單，設定的相關屬性與anchors的值對應後，菜單能夠控制滾動條，默認爲false。可設置爲菜單的jquery選擇器
        //menu:"#fullpageMenu",

        //navigation是否顯示導航，默認爲false
        navigation:true,

        //navigationPosition導航小圓點的位置
        navigationPosition:"right",

        //navigationTooltips導航小圓點的提示，注意按順序設置
        navigationTooltips:['page1','page2','page3','page4','page5'],

        //showActiveTooltip是否顯示當前頁面的tooltip信息，默認爲false

        //slidesNavigation 是否顯示橫向幻燈片的導航，默認爲false
        slidesNavigation:true,

        //slidesNavPosition橫向導航的位置，默認爲bottom，能夠設置爲top或bottom
        slidesNavPositon:"top",

        //scrollOverflow內容超過滿屏後是否顯示滾動條，默認爲false,若是爲true則會顯示滾動條，若需滾動查看內容還須要jquery.slimscroll插件的配合

        //sectionSelector:section選擇器。默認爲.section
        //slideSelector:slide選擇器，默認爲.slide

        //方法介紹
        //$.fn.fullpage.***()

        //moveSectionUp()向上滾動一頁

        //moveSectionDown()向下滾動一頁

        //moveTo(section,slide)section從1開始，slide從0開始

        //silentMoveTo(section,slide)和moveTo同樣，可是沒有滾動效果

        //moveSlideRight()幻燈片向右滾動

        //moveSlideLeft()幻燈片向左滾動

        //setAutoScrolling(boolean):動態設置autoScrolling

        //setLockAnchors(boolean):動態設置lockAnchors

        //setRecordHistory(boolean):動態設置recordHistory

        //setScrollingSpeed(milliseconds):動態設置scrollingSpeed

        //destory(type)銷燬fullpage,type能夠不寫或者使用all

        //reBuild()從新更新頁面和尺寸，用於ajax請求改變頁面結構後重建效果

        //lazyLoading
    });
});
</script>

 

2. 選項

選項	類型	默認值	解釋
verticalCentered	字符串	true	內容是否垂直居中
resize	布爾值	false	字體是否隨着窗口縮放而縮放
sectionsColor	數組	無	設置背景顏色
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

 

3. 方法

方法	解釋
moveSectionUp()	向上滾動
moveSectionDown()	向下滾動
moveTo(section, slide)	滾動到
moveSlideRight()	slide 向右滾動
moveSlideLeft()	slide 向左滾動
setAutoScrolling()	設置頁面滾動方式，設置爲 true 時自動滾動
setAllowScrolling()	添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling()	添加或刪除鍵盤方向鍵控制
setScrollingSpeed()	定義以毫秒爲單位的滾動速度

4. 回調函數

回調函數	解釋
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個參數