不知道從什麼時候開始,單頁網站就悄悄走進人們的視線,尤其是國外的網站,更是鐘愛單頁網站.製作一個全屏滾動的效果,然後每個滾動頁弄一個好看的背景色,配上一些描述性的文字,大家都喜歡這麼弄,仿佛逼格瞬間可以爆表似的.當然,不得不承認,介紹產品的頁面用單頁網站似乎確實高大上的多.在站長之家看到一篇文章，讓... ...
不知道從什麼時候開始,單頁網站就悄悄走進人們的視線,尤其是國外的網站,更是鐘愛單頁網站.製作一個全屏滾動的效果,然後每個滾動頁弄一個好看的背景色,配上一些描述性的文字,大家都喜歡這麼弄,仿佛逼格瞬間可以爆表似的.當然,不得不承認,介紹產品的頁面用單頁網站似乎確實高大上的多.
在站長之家看到一篇文章，讓我對單頁網站有了探索的熱情。文章這麼寫的：“隨著單頁網站從未經考驗的即興創作一躍成為受人熱捧的潮流趨勢，垂直滾動的理念正式成了人們目光聚焦的中心。與此同時，設計師們也在大踏步地創新，力求讓這一趨勢在百尺竿頭更進一步。根據人類的自然習性，我們在剛開始習慣某項新鮮事物時總會儘量維持耐心。但在互聯網上，則截然相反。隨著網路日漸成為我們生活的中心，人們的耐心越來越差。正是因此，我們開始逐漸摒棄需要花費時間等待從A頁面轉到B頁面的網站。3次點擊原則已經不再適用。我們希望能夠不用3次點擊，甚至一次點擊都不用就獲取到網站上某一位置的信息。而這正是單頁網站發揮實力的地方，也是垂直滾動趨勢大踏步發展的契機。”
v1.0單頁案例
前面已經提到"介紹產品的頁面用單頁網站似乎確實高大上的多.",下麵就展示兩個介紹產品的單頁網站.
這兩個瀏覽器的頁面是典型的全屏滾動頁面，這樣的設計是不是會提升逼格？
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.zip3.5fullPage.js GitHub
https://github.com/alvarotrigo/fullPage.jsv博客總結
到這估計會有人說單頁網站有哪些不好的地方，獲取流量難度加大/關鍵詞佈局難度加大/無法站內優化操作等等。只能說"物生一利，必生一弊。" 關於單頁網站的取捨還得看自己的需求吧。本篇博文也只是出於愛好所以搗鼓搗鼓fullPage.js，對於fullPage.js的參數或者方法並沒有逐個試驗。大家有興趣或者需求的話可以自己多試試。
作 者：請叫我頭頭哥
出 處：http://www.cnblogs.com/toutou/
關於作者：專註於基礎平臺的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回覆。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！
