【转载】fullpage.js学习
參考網址: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:
字體是否隨著窗口縮放而縮放,默認為false5.scrollingSpeed:
滾動速度,單位為毫秒,默認為7006.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信息,默認為false28.slidesNavigation:
是否顯示橫向幻燈片的導航,默認false。29.slidesNavPosition:
橫向幻燈片導航的位置,默認為bottom,可以設置為top或bottom30.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):
動態設置autoScrolling11.setLockAnchors(boolean):
動態設置lockAnchors12.setRecordHistory(boolean):
動態設置recordHistory13.setScrollingSpeed(milliseconds):
動態設置scrollingSpeed14.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回掉函數。
轉載于:https://www.cnblogs.com/blogCode929817775/p/7102512.html
總結
以上是生活随笔為你收集整理的【转载】fullpage.js学习的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 关于编码
- 下一篇: save()、saveOrUpdate(