fullPage.js 是一個(gè)基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站。如今我們經(jīng)常能見到全屏網(wǎng)站，尤其是國外網(wǎng)站。這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內(nèi)容，顯得格外的高端大氣上檔次。如果你也希望你的網(wǎng)站能設(shè)計(jì)成全屏的，顯得更上檔次，你可以試試 fullPage.js。
 
fullPage.js的主要功能有：支持鼠標(biāo)滾動(dòng)、支持前進(jìn)后退和鍵盤控制、多個(gè)回調(diào)函數(shù)、支持手機(jī)、平板觸摸事件、支持 CSS3 動(dòng)畫、支持窗口縮放、窗口縮放時(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ì)于排版密集的頁面想要根據(jù)瀏覽器窗口大小來判斷是否需要取消fullpage中自帶的滾屏效果而采用一般網(wǎng)頁的滾動(dòng)效果，只需添加如下代碼即可：


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


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

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