|
前言：通過360圖書館的年度的年終總結，發(fā)現(xiàn)了它是使用了一個Fullpage的插件，感覺挺好的。 Fullpage.js是一個基于jquery的插件，他可以非常方便、很輕松的制作一個全屏網(wǎng)站： 1.支持鼠標滾動2.多個回調函數(shù) 3.支持手機、平板等觸摸事件 4.支持css3動畫 5.支持窗口縮放 6.窗口縮放時自動調整 7.可設置滾動寬度、背景顏色、滾動速度、循環(huán)選項、回調、文本對齊方式等 Git.hub上的fullpage主頁： https://github.com/alvarotrigo/fullPage.js 開始使用： 需要引入jquery1.6以上的任意版本 引入fullpage： <link rel="stylesheet" href="https://cdnjs./ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"> <script src="https://cdnjs./ajax/libs/jquery/2.0.0/jquery.js"></script> <script src="https://cdnjs./ajax/libs/fullPage.js/2.6.7/vendors/jquery.easings.min.js"></script> <script src="https://cdnjs./ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script> 基本的頁面結構： <div id="fullpage"> <div class="section">something</div> <div class="section">something</div> <div class="section">something</div> <div class="section">something</div> </div> 激活fullpage效果： <script> $(document).ready(function(){ $('#fullpage').fullpage(); }) </script> Fullpage的配置項： 1.sectionsColor: 可以為每一個section設置background-color屬性 2.controlArrows： 控制slide幻燈片箭頭的顯隱，當為flase時箭頭隱藏，默認箭頭顯示 3.verticalCentered: 控制每一頁的內(nèi)容是否垂直居中顯示，默認為true，一般我們都使用默認值 4.resize： 控制字體是否隨窗口縮放而縮放，默認為false 5.scrollingSpeed: 控制頁面滾動速度，默認為700 6.anchors： 定義錨鏈接，默認值為[]，有了錨鏈接，用戶可以迅速定位到某一頁面。需要注意的是，錨鏈接的命名不能與頁面中的name和id名重復，尤其是ie瀏覽器下。而且定義時不需要加# 定位到頁面的話，需要在section的div上面加上active的類名 7.lockAnchors: 是否鎖定錨鏈接，默認為flase，也就是不鎖定錨鏈接，當設置為true時，定義的錨鏈接就沒有效果了，這個配置項很少使用 8.easing: 定義頁面section滾動的動畫方式，默認為easeInOutCubic,如果修改此項，需要引入jquery.easings的動畫插件，或者是jquery.ui 9.css3: 是否使用css3 transforms來實現(xiàn)滾動效果，默認為true。這個配置項可以提高支持css3的瀏覽器或者是移動端的效果和速度，如果瀏覽器不支持css3，則會使用jquery來替代css3實現(xiàn)滾動效果（優(yōu)雅降級）。 10.loopTop： 滾動到最頂部后是否連續(xù)滾動到底部，默認為false 11.loopBottom 滾動到最底部后是否連續(xù)滾回到最頂部，默認為false 12.loopHorizontal 橫向slider幻燈片是否循環(huán)滾動，默認為true 13.autoScrolling 是否使用插件的滾動方式，默認為true，如果選擇false，則會出現(xiàn)瀏覽器自帶的滾動條，將不會按頁滾動，而是按照滾動條的默認行為來進行滾動。 14.scrollBar： 是否包含滾動條，默認為false，如果設置為true，則瀏覽器自帶的滾動條會出現(xiàn)，頁面的滾動還是按頁滾動，但是滾動條的默認行為也有效。 15.paddingTop/paddingBottom: 設置每一個section頁面頂部和底部的padding值，默認為0，但是當頁面上有固定在頂部或者底部的菜單或者導航欄的時候，可以使用這兩項進行配置。（paddingTop:"200px"） 16.fixedElements 固定的元素，默認為null，需要配置一個jquery選擇器。在頁面滾動的時候，fixedElements設置的元素固定不變。 17.keyboardScrolling 是否可以使用鍵盤方向鍵導航，默認值為true 18.tochuSensitivity 在移動端設備上滑動頁面的敏感性，默認為5，是按百分比來衡量的，最高為100，越大則越難滑動 19.continuousVertical： 頁面是否循環(huán)滾動，默認為false。如果設置為true，則頁面會循環(huán)滾動，這樣頁面滾動起來不像loopTop和loopBottom一樣會出現(xiàn)跳動，注意：此屬性和loopTop/loopBottom不兼容，不能同時設置 20.animateAnchor 錨鏈接是否可以控制頁面滾動動畫，默認為true。如果設置為false，則通過錨鏈接定位到頁面某個點不會有動畫效果 21.recordHistory 是否記錄歷史記錄，默認為true可以記錄頁面的滾動歷史，通過瀏覽器的前進后退按鈕來進行導航。注意：如果設置了autoScrolling：false，那么這個配置項也會被關閉，即設置為false 22.Menu 綁定菜單，設定相關屬性與anchors的值對應后，菜單可以控制滾動，默認為false?？梢栽O置為jquery的選擇器 <ul id="fullpageMenu"> <li date-menuanchor='page1'><a href="#page1">1 section</a></li> <li date-menuanchor='page2'><a href="#page2">2 section</a></li> <li date-menuanchor='page3'><a href="#page3">3 section</a></li> <li date-menuanchor='page4'><a href="#page4">4 section</a></li> </ul> anchors:['page1','page2','page3','page4'], menu:"#fullpageMenu" 23.Navigation 是否顯示導航，默認為false，如果設置為true會顯示小圓點兒，作為導航 24.navigationPosition 設置導航小圓點的位置 可以是left或者right 默認為right 25.navigationTooltips 導航小圓點的tooltips設置，默認為[]，注意按照順序設置 26.showActiveTooltip 是否顯示當前導航的tooltip信息，默認是不顯示（false） 27.slidesNavigation 是否顯示橫向幻燈片的導航，默認是false 28.SlidesNavPosition 橫向幻燈片導航的位置，默認為bottom，可以設置為top或者bottom 29.scrollOverflow 內(nèi)容超過滿屏后是否顯示滾動條，默認為false。如果設置為true，則會顯示滾動條，如果要滾動查看內(nèi)容，還需要jquery.slimscroll插件的配合。Slimscroll插件的主要是用于模擬傳統(tǒng)瀏覽器的滾動條樣式 30.sectionSelector section的選擇器 默認為.section 31.slideSelector slide的選擇器默認為.slide Fullpage的方法： $.fn.fullpage.xxx() 1.moveSectionUp() 向上滾動一頁 2.moveSectionDown() 向下滾動一頁 3.moveTo(section,slide) 滾動到第幾頁第幾張幻燈片 注意：頁面是從1開始，幻燈片是從0開始 4.silentMoveTo(section,slide) 與moveTo(section,slide)一樣，但是沒有動畫效果 5.moveSlideRight() 幻燈片向右滾動 6.moveSlideLeft() 幻燈片向左滾動 7.setAutoScrolling(boolean) 8.setLockAnchors(boolean) 9.setRecordHistory(boolean) 10.setScrollingSpeed(millinsecond) 11.setAllowScrolling(boolean,[directions]) 添加或者刪除鼠標滾輪或者滑動控制，第一個參數(shù)為true時啟用，false時禁用，后面的參數(shù)為方向，取值為all，left，right，up，down，可以使用多個，使用多個時用逗號隔開 12.destroy(type) 銷毀fullpage特效，type可以不寫，或者使用all，不寫type，fullpage給頁面添加的樣式和html元素還在，如果使用all，則樣式、html全部銷毀，頁面恢復和不使用fullpage相同的效果。 13.reBuild（） 重新更新頁面和尺寸，用于通過ajax請求改變了頁面結構之后，重建效果。 Lazy loading 圖片： <img data-src="image/img1.jpg"> 視頻： <video > <source data-src="video.mp4" type='video/mp4'> </video> Fullpage的回調函數(shù)： 1.afterLoad（anchorLink，index） 滾動到某一section，且滾動結束后，會觸發(fā)一次此回調函數(shù)。函數(shù)接收anchorLink和index兩個參數(shù)，anchorLink是錨鏈接的名稱，index是序號，從1開始計數(shù)。 我們可以根據(jù)nchorLink和index這兩個參數(shù)值的判斷，觸發(fā)相應的事件。 afterLoad:function(anchorLink，index){ } 2.onLeave（index，nextIndex，direction） index 是離開的“頁面”的序號，從1開始計算 nextIndex 是滾動到的“頁面”的序號，從1開始計算 direction 判斷往上滾動還是往下滾動，值是 up 或 down 通過return false可以取消滾動 3.afterRender（） 頁面結構生成后的回調函數(shù)，或者說頁面初始化完成后的回調函數(shù) 4.afterResize（） 瀏覽器窗口尺寸發(fā)生改變之后的回調函數(shù) 5.afterSlideLoad（anchorLink，index，slideAnchor，slideIndex） 滾動到某一幻燈片發(fā)生的回調函數(shù)，與afterLoad相似，接收anchorLink，index，slideIndex，direction這四個參數(shù) 6.onSlideLeave（anchorLink，index，slideIndex，direction，nextSlideIndex） 在我們離開一個slide時，會觸發(fā)一次此回調函數(shù)，與onLeave相似，接收anchorLink、index、slideIndex、direction這四個參數(shù) |
|
|
