插件描述：fullPage.js 是一個基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網站。
如今我們經常能見到全屏網站，尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內容，主要是動畫，顯得格外的高端大氣上檔次。比如 iphone 5C 的介紹頁面（查看網址 http://www.jq22.com/demo/fullpage-141201214949/index8.html#page2）。如果你也希望你的網站能設計成全屏的，顯得更上檔次，你可以試試 fullPage.js。
主要功能有：
支持鼠標滾動支持前進后退和鍵盤控制多個回調函數支持手機、平板觸摸事件支持 CSS3 動畫支持窗口縮放窗口縮放時自動調整可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等
我利用fullpage.js模仿百度輿情完成的全屏輪播網站網址https://xuanrandeyimojingjin.github.io/baiduyuqing/，初學時的作品，謹供大家看一下效果，有興趣的可以自己動手設計自己的全屏網站！
插件調用
<ul id="lunbo"> <li>...</li> <li>...</li> <li>...</li> <li>...</li></ul><script src="jquery.js"></script><script src="jqeury.lunbo.js"></script><script>$('#lunbo').lunbo({ //一些配置項 time:40; step:function(){}});</script>jQuery插件文件
(function($){ var lunbo = function () { console.log(1); } $.fn.extend({ lunbo:lunbo; })})(jQuery)如果百度使用了某個 cdn中的jquery.js,而且用戶打開過百度, 我們自己同樣使用了 同一個 cdn中的jquery.js, 用戶打開我們的網頁時使用瀏覽器緩存中的jquery.js.
例子
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./css/index.css"> <script src="https://cdn.boot.com/jquery.js"></script> <script src="./js/index.js"></script> </head> <body> </body></html>每滾動一屏，會給當前section加上 active class
所以我們可以寫出類似下面這樣的 scss 文件來操控動畫
#section1{ h1{ /**/ } h2{ transition: /**/ }}#section1.active{ h1{ animation:/**/ } h2{ /**/ }}一個數組 規定了各個section的顏色
verticalCentered每一頁的內容是否垂直居中，默認值為true
resize字體大小是否隨窗口縮放而縮放 默認值為false
scrollingSpeed滾動速度,默認為700毫秒
anchors給每個section定義錨鏈接
lockAnchors是否鎖定錨鏈接
active class默認顯示哪個section
easing定義頁面section滾動的動畫方式 設置這個值需要引入jquery.easings 插件
css3默認為true,使用css3 transform 來實現頁面滾動動畫
loopTop滾動到最頂部后是否連續滾動到底部，默認值為false
loopBottom滾動到最底部后是否連續滾動回頂部 默認值為false
loopHorizontal橫向slide幻燈片是否循環滾動，默認值為true
autoScrolling是否使用插件的滾動方式，默認值為true, 如果設置為false,則會出現瀏覽器自帶的滾動條
scrollBar是否包含滾動條，默認值為false 如果設置為true,則瀏覽器自帶的滾動條出現 頁面滾動時還是頁滾動，但是滾動條的默認行為也效果
paddingTop paddingBottom設置每一個section頂部和底部的padding，默認值為0 如果我們需要設置一個固定在頂部或者底部的菜單，導航，元素等，可以使用這兩個配置項
fixedElements普通方式書寫的固定定位元素會被插件覆蓋 需要我們通過指定這個屬性才會生效，參數為一個jquery選擇器
keyboardScrolling是否可以使用鍵盤方向鍵導航，默認值為true
touchSensitivity在移動設備中滑動頁面的敏感性，默認為5，按百分比衡量，越大則越難滑動
continuousVertical是否循環滾動，默認值為false，如果設置為true,則頁面會循環滾動， 不像loopTop loopBottom那樣出現跳動 這個屬性和loopTop loopBottom 不兼容 不要同時設置
animateAnchor錨鏈接是否可以控制滾動動畫，默認為true。如果設置為false,則通過錨鏈接定位到某個頁面顯示不再有動畫
recordHistory是否記錄歷史,默認為true,可以記錄頁面滾動的地址 通過瀏覽器前進和后退按鈕來導航
menu綁定菜單，設定的相關屬性與anchors的值對應后，菜單可以控制滾動，默認值為 false 可以設置為菜單的jquery選擇器
<ul id="fullpageMenu"> <li data-menuanchor="page1"><a href="#page1">1</a</li> .....</ul>navigation是否顯示導航，默認false 如果設置為true 會顯示小圓點，作為導航
navigationPosition導航小圓點位置，可以設置為left或者right
navigationTooltips導航小圓點的tooltips設置，默認為[],按照順序放置
showActiveTooltip是否顯示當前頁面的導航的tooltip信息，默認為false
slidesNavigation是否顯示橫向幻燈片的導航，默認值為false
slidesNavPosition橫向幻燈片導航的位置，默認為bottom 可以設置為top
controlArrows定義是否通過箭頭來控制slide幻燈片,默認值為true 在移動設備上可以通過滑動來操作幻燈片
scrollOverflow內容超過滿屏后是否顯示滾動條，默認為false. 如果設置為true,則會顯示滾動條 如果要滾動查看內容，還需要jquery.slimscroll插件，該插件主要用于模擬傳統的瀏覽器滾動條
sectionSelectorsection的選擇器，默認為.section
slideSelectorslide的選擇器 默認為.slide.
滾動到某一section，且滾動結束后，會觸發一次此回調函數，函數接收 anchorLink 和index 兩個參數， anchorLink 是錨鏈接的名稱 index 是序號 從1開始計算 可以根據 anchorLink 和 index的參數值判斷觸發相應的事件
onLeave(index,nextIndex,direction)離開一個section時觸發，通過return false可以取消滾動 離開的序號 到達的序號 滾動的方向
afterRender()頁面結構生成之后的回調函數
afterResize()瀏覽器窗口尺寸改變之后的回調函數
afterSlideLoad()滾動到某一個幻燈片后的回調函數
onSlideLeave離開一個slide之后的回調函數
moveSectionUp()
moveSectionDown()
$('#movedown').on('click',function(){ $.fn.fullpage.moveSectionDown(); })moveTo(section,slide)滾動到第幾頁，第幾個幻燈片，注意，頁面從1開始，而幻燈片從0開始
silentMoveTo(section,slide)滾動到第幾頁，和moveTo一樣，但是沒有動畫效果
moveSlideRight()幻燈片向右滾動
moveSlideLeft()幻燈片向左滾動
setAutoScrolling()
setLockAnchors()
setRecordHistory()
setScrollingSpeed()
setAllowScrolling(boolean,[directions])
添加或刪除鼠標滾輪/滑動控制，第一個參數true為啟用，false 為禁用 后面的參數為方向，取值包含 all,up,down,left,right,可以使用多個，逗號隔開
destory(type)銷毀fullpage特效，type可以不寫，或者使用all,不寫type,fullpage給頁面添加的樣式和html元素還在 如果使用all,則樣式 html等全部銷毀
reBuild()重新更新頁面和尺寸，用于通過Ajax請求后改變了頁面結構之后，重建效果
~END~
我是渲染的一抹寂靜
追求自由 獨立 簡單 努力做一個熱愛生活 珍惜生命的人
白天是個哼次哼次敲代碼的程序猿，晚上是讀書，健身，享受生活的自由者。
如果你喜歡我的文字和內容，關注我，一起加油 一起進步 不定期更文，我等你來哦！
新聞熱點
疑難解答
