fullPage.js 是一個(gè)基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站。如今我們經(jīng)常能見(jiàn)到全屏網(wǎng)站，尤其是國(guó)外網(wǎng)站。這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡(jiǎn)單的內(nèi)容，顯得格外的高端大氣上檔次。如果你也希望你的網(wǎng)站能設(shè)計(jì)成全屏的，顯得更上檔次，你可以試試 fullPage.js。
 
fullPage.js的主要功能有：支持鼠標(biāo)滾動(dòng)、支持前進(jìn)后退和鍵盤(pán)控制、多個(gè)回調(diào)函數(shù)、支持手機(jī)、平板觸摸事件、支持 CSS3 動(dòng)畫(huà)、支持窗口縮放、窗口縮放時(shí)自動(dòng)調(diào)整、可設(shè)置滾動(dòng)寬度、背景顏色、滾動(dòng)速度、循環(huán)選項(xiàng)、回調(diào)、文本對(duì)齊方式等等
 
對(duì)于fullpage.js的配置、方法和回調(diào)函數(shù)這里就不再贅述了，這里主要介紹一下響應(yīng)式的功能。

在 fullPage 2.5.4 版本中，對(duì)于排版密集的頁(yè)面想要根據(jù)瀏覽器窗口大小來(lái)判斷是否需要取消fullpage中自帶的滾屏效果而采用一般網(wǎng)頁(yè)的滾動(dòng)效果，只需添加如下代碼即可：


調(diào)用這個(gè)方法完全能實(shí)現(xiàn)上述效果，缺點(diǎn)是各個(gè)模塊的高度是由fullpage.js本身獲取的瀏覽器高度決定的，也就是原本各個(gè)section的全屏高度，對(duì)于排版密集的頁(yè)面在低分辨率屏幕上的顯示不是很友好。
 
而在 fullPage 2.7.3 版本中，要實(shí)現(xiàn)上訴效果則需要調(diào)用另一種方法，代碼如下：
 


// $.fn.fullpage.destroy('type')//銷(xiāo)毀fullpage特效，type可以不寫(xiě)。或者使用all。不寫(xiě)type，fullpage給頁(yè)面添加的樣式和html元素還在
     //如果使用all，則樣式\html等全部銷(xiāo)毀，頁(yè)面恢復(fù)和不使用fullpage相同的效果
運(yùn)用這種方法則上面那種方法的限制解除了，各個(gè)模塊的高度不受section 獲取的值限制了，而是根據(jù)各個(gè)模塊內(nèi)容的高度而自動(dòng)調(diào)整相應(yīng)的高度，對(duì)于排版密集的頁(yè)面在低分辨率屏幕上的顯示算是比較好的一種處理方式了。
 
當(dāng)然，在低分率中頁(yè)面內(nèi)容想要顯示美觀還是需要另外調(diào)整css樣式了。

作者：方維網(wǎng)絡(luò)樂(lè)文慶