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

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


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


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

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