[TOC] > [github](https://github.com/alvarotrigo/fullPage.js) > [home 官方demo ](https://alvarotrigo.com/fullPage/zh/) ## 簡單demo ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.css"> <style> div{ background-color:#ccc; } </style> <div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <!-- active 錨點先定位到這一頁 --> <div class="section active">Some section2222222222123132</div> <div class="section"> <!-- 懶加載 --> <img data-src="https://img.hellogithub.com/HelloGitHub/41/img/chart.xkcd.gif" alt=""> </div> <!-- 橫向滾動 --> <div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.js"></script> <script> new fullpage('#fullpage', { //options here autoScrolling: true, scrollHorizontally: true }); //methods fullpage_api.setAllowScrolling(true); //允許鼠標滾動 </script> ``` ## 配置說明 ``` new fullpage('#fullpage', { sectionsColor: ['#4A6FB1'], 設置 sections 顏色 autoScrolling: true, //自動滾動 scrollHorizontally: true, scrollOverflow:true, //內容大于高度時,可在 此section 中滾動 scrollingSpeed: 1700, 滾動速度 }); fullpage_api.setAllowScrolling(true); //允許鼠標滾動 ``` ## 官方優秀實例 ### 背景圖 > [demo](https://alvarotrigo.com/fullPage/examples/backgrounds.html) ### 固定背景圖 > [demo](https://alvarotrigo.com/fullPage/examples/fixedBackgrounds.html) ### 全屏視頻 > [demo](https://alvarotrigo.com/fullPage/examples/videoBackground.html)