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