不知道從什么時候開始,單頁網站就悄悄走進人們的視線,尤其是國外的網站,更是鐘愛單頁網站.制作一個全屏滾動的效果,然后每個滾動頁弄一個好看的背景色,配上一些描述性的文字,大家都喜歡這么弄,仿佛逼格瞬間可以爆表似的.當然,不得不承認,介紹產品的頁面用單頁網站似乎確實高大上的多.

在站長之家看到一篇文章，讓我對單頁網站有了探索的熱情。文章這么寫的：“隨著單頁網站從未經考驗的即興創作一躍成為受人熱捧的潮流趨勢，垂直滾動的理念正式成了人們目光聚焦的中心。與此同時，設計師們也在大踏步地創新，力求讓這一趨勢在百尺竿頭更進一步。根據人類的自然習性，我們在剛開始習慣某項新鮮事物時總會盡量維持耐心。但在互聯網上，則截然相反。隨著網絡日漸成為我們生活的中心，人們的耐心越來越差。正是因此，我們開始逐漸摒棄需要花費時間等待從A頁面轉到B頁面的網站。3次點擊原則已經不再適用。我們希望能夠不用3次點擊，甚至一次點擊都不用就獲取到網站上某一位置的信息。而這正是單頁網站發揮實力的地方，也是垂直滾動趨勢大踏步發展的契機?！?/p>

v1.0單頁案例

前面已經提到"介紹產品的頁面用單頁網站似乎確實高大上的多.",下面就展示兩個介紹產品的單頁網站.

• 百度瀏覽器
• QQ瀏覽器

這兩個瀏覽器的頁面是典型的全屏滾動頁面，這樣的設計是不是會提升逼格？

v2.0配置Demo

2.1準備工作

引入文件：

2.2代碼布局

??? <divid="main">

??????? <divclass="section">

??????????? <h3>第一屏</h3>

??????? </div>

??????? <divclass="section">

??????????? <h3>第二屏</h3>

??????? </div>

??????? <divclass="section">

????????? ??<h3>第三屏</h3>

??????? </div>

??????? <divclass="section">

??????????? <h3>第四屏</h3>

??????? </div>

??? </div>

2.3綁定控件

<script>

??????? $(function(){

??????????? $('#main').fullpage({

??????????????? sectionsColor:['#1bbc9b','#4BBFC3','#7BAABE','#f90'],

??????????????? continuousVertical:true,

????????????? ??navigation:true

??????????? });

??????? });

</script>

2.4小結

這樣一個簡單的全局滾動效果就有了。

v3.0更多介紹

3.1fullPage.js 參數介紹

選項類型默認值說明

verticalCentered	字符串	true	內容是否垂直居中
resize	布爾值	false	字體是否隨著窗口縮放而縮放
slidesColor	函數	無	設置背景顏色
anchors	數組	無	定義錨鏈接
scrollingSpeed	整數	700	滾動速度，單位為毫秒
easing	字符串	easeInQuart	滾動動畫方式
menu	布爾值	false	綁定菜單，設定的相關屬性與 anchors 的值對應后，菜單可以控制滾動
navigation	布爾值	false	是否顯示項目導航
navigationPosition	字符串	right	項目導航的位置，可選 left 或 right
navigationColor	字符串	#000	項目導航的顏色
navigationTooltips	數組	空	項目導航的 tip
slidesNavigation	布爾值	false	是否顯示左右滑塊的項目導航
slidesNavPosition	字符串	bottom	左右滑塊的項目導航的位置，可選 top 或 bottom
controlArrowColor	字符串	#fff	左右滑塊的箭頭的背景顏色
loopBottom	布爾值	false	滾動到最底部后是否滾回頂部
loopTop	布爾值	false	滾動到最頂部后是否滾底部
loopHorizontal	布爾值	true	左右滑塊是否循環滑動
autoScrolling	布爾值	true	是否使用插件的滾動方式，如果選擇 false，則會出現瀏覽器自帶的滾動條
scrollOverflow	布爾值	false	內容超過滿屏后是否顯示滾動條
css3	布爾值	false	是否使用 CSS3 transforms 滾動
paddingTop	字符串	0	與頂部的距離
paddingBottom	字符串	0	與底部距離
fixedElements	字符串	無	?
normalScrollElements	?	無	?
keyboardScrolling	布爾值	true	是否使用鍵盤方向鍵導航
touchSensitivity	整數	5	?
continuousVertical	布爾值	false	是否循環滾動，與 loopTop 及 loopBottom 不兼容
animateAnchor	布爾值	true	?
normalScrollElementTouchThreshold	整數	5	?

3.2fullPage.js 方法介紹

名稱說明

moveSectionUp()	向上滾動
moveSectionDown()	向下滾動
moveTo(section, slide)	滾動到
moveSlideRight()	slide 向右滾動
moveSlideLeft()	slide 向左滾動
setAutoScrolling()	設置頁面滾動方式，設置為 true 時自動滾動
setAllowScrolling()	添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling()	添加或刪除鍵盤方向鍵控制
setScrollingSpeed()	定義以毫秒為單位的滾動速度

3.3fullPage.js 回調函數介紹

名稱說明

afterLoad	滾動到某一屏后的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算
onLeave	滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數：index 是離開的“頁面”的序號，從1開始計算； ? nextIndex 是滾動到的“頁面”的序號，從1開始計算； direction 判斷往上滾動還是往下滾動，值是 up 或 down。
afterRender	頁面結構生成后的回調函數，或者說頁面初始化完成后的回調函數
afterSlideLoad	滾動到某一水平滑塊后的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數
onSlideLeave	某一水平滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數

3.4fullPage.js 中文demo及文檔下載

http://files.cnblogs.com/files/toutou/fullPage.zip

3.5fullPage.js GitHub

https://github.com/alvarotrigo/fullPage.js

v博客總結

到這估計會有人說單頁網站有哪些不好的地方，獲取流量難度加大/關鍵詞布局難度加大/無法站內優化操作等等。只能說"物生一利，必生一弊。" 關于單頁網站的取舍還得看自己的需求吧。本篇博文也只是出于愛好所以搗鼓搗鼓fullPage.js，對于fullPage.js的參數或者方法并沒有逐個試驗。大家有興趣或者需求的話可以自己多試試。

作　　者：請叫我頭頭哥
出　　處：http://www.cnblogs.com/toutou/
關于作者：專注于基礎平臺的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步?；蛘咧苯铀叫盼?
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！

總結

以上是生活随笔為你收集整理的拥抱单页网站! jQuery全屏滚动插件fullPage.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。