# fullPage.js   <p align="center"> <a href="https://github.com/alvarotrigo/fullPage.js">English</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish#fullpagejs">Espa?ol</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian#fullpagejs">Pусский</a> | <span>中文</span> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#fullpagejs">???</a> </p> <p align="center"> 適用于<a href="https://github.com/alvarotrigo/vue-fullpage.js">Vue</a>,<a href="https://github.com/alvarotrigo/react-fullpage">React</a>和<a href="https://github.com/alvarotrigo/angular-fullpage">Angular</a> </p> ---  [](https://www.gnu.org/licenses/gpl-3.0.html) [](https://www.paypal.me/alvarotrigo/9.95) [](https://www.jsdelivr.com/package/npm/fullpage.js) &nbsp;&nbsp; **|**&nbsp;&nbsp; *7Kb gziped* &nbsp;&nbsp;**|**&nbsp;&nbsp; *Created by [@imac2](https://twitter.com/imac2)* - [現場演示](http://alvarotrigo.com/fullPage/) | [Codepen](https://codepen.io/alvarotrigo/pen/NxyPPp) - [Wordpress 的主題](http://alvarotrigo.com/fullPage/utils/wordpress.html) - [fullpage.js擴展](http://alvarotrigo.com/fullPage/extensions/) - Wrappers: [Vue.js[()] | React.js - [常見問題](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions) --- 通過調用本庫可輕易創建全屏滾動網站(也稱為單頁網站)。 本庫可創建全屏滾動網站，同時也可在網站中添加橫向滾動條。 - [介紹](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E4%BB%8B%E7%BB%8D) - [兼容性](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%85%BC%E5%AE%B9%E6%80%A7) - [許可證](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E8%AE%B8%E5%8F%AF%E8%AF%81) - [用法](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E7%94%A8%E6%B3%95) - [創建鏈接到段落或幻燈片](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%88%9B%E5%BB%BA%E9%93%BE%E6%8E%A5%E5%88%B0%E6%AE%B5%E8%90%BD%E6%88%96%E5%B9%BB%E7%81%AF%E7%89%87) - [創建更小或更大的段落](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%88%9B%E5%BB%BA%E6%9B%B4%E5%B0%8F%E6%88%96%E6%9B%B4%E5%A4%A7%E7%9A%84%E6%AE%B5%E8%90%BD) - [fullpage.js添加的狀態類](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E7%94%B1fullpagejs%E6%B7%BB%E5%8A%A0%E7%9A%84%E7%8A%B6%E6%80%81%E7%B1%BB) - [快速加載](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD) - [自動播放內嵌媒體](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E8%87%AA%E5%8A%A8%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%AA%92%E4%BD%93) - [使用擴展](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E4%BD%BF%E7%94%A8%E6%89%A9%E5%B1%95) - [選項](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E9%80%89%E9%A1%B9) - [方法](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E6%96%B9%E6%B3%95) - [回調](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#callbacks) - [報告問題](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E6%8A%A5%E5%91%8A%E9%97%AE%E9%A2%98) - [完善fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E8%B4%A1%E7%8C%AE%E7%BB%99fullpagejs) - [變更日志](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97) - [創建任務](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E6%9E%84%E5%BB%BA%E4%BB%BB%E5%8A%A1) - [資源](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%8F%82%E8%80%83%E8%B5%84%E6%BA%90) - [誰在使用fullpage.js](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E8%B0%81%E5%9C%A8%E4%BD%BF%E7%94%A8-fullpagejs) - [贊賞](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E6%8D%90%E7%8C%AE) ## 介紹 不僅限于提需求，也歡迎提出編碼風格改進的建議。 集思廣益，讓這個庫更加強大，讓寫代碼更輕松！ ## 兼容性 fullPage.js兼容所有的現代瀏覽器，以及一些舊版瀏覽器，如Internet Explorer 9，Opera 12等都能兼容。 可兼容支持CSS3的瀏覽器與非支持CSS3的瀏覽器，適用于舊版瀏覽器。 同時，手機、平板電腦和觸摸屏電腦還提供觸屏支持。 特別感謝[Browserstack](http://www.browserstack.com/) 支持fullpage.js。 ## 許可證 ### 商業許可證 如果您想使用fullPage開發商業網站、主題、項目和應用程序，商業許可證是您應使用的許可證。使用這個許可證，您的源代碼將保留專有權。 這意味著，您不必將整個應用程序源代碼更改為開源許可證。[點擊此處購買fullpage商業許可證](https://alvarotrigo.com/fullPage/pricing/) ### 開源許可證 如果您使用與[GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html)兼容的許可證創建開源應用程序，則可以在GPLv3條款下使用fullPage。 **JavaScript和CSS文件中的信用評論應保持完整 (即使在組合或縮小后）** [閱讀更多關于fullPage的許可證](https://alvarotrigo.com/fullPage/pricing/)。 ## 用法 正如示例文件所示，需要引用： - JavaScript 文件`fullpage.js` (或其縮小版本 `fullpage.min.js`) - css 文件`fullpage.css` **可選**，使用`css3:false`時，如果您想要使用庫中包含的其他緩動效果的功能（`easeInOutCubic`），您可以添加[easings file](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/easings.min.js)。 ### 使用bower或npm進行安裝 **或者**，如果您愿意，可以使用bower或npm安裝fullPage.js： 終端： ```shell // 使用bower bower install fullpage.js // 使用npm npm install fullpage.js ``` ### 包含文件： ```html <link rel="stylesheet" type="text/css" href="fullpage.css" /> <!-- 以下行是可選的。 只有在使用選項css3:false，并且您希望使用其他緩動效果，而非“linear”、“swing”或“easeInOutCubic”時才有必要。 --> <script src="vendors/easings.min.js"></script> <!-- 以下行僅在使用選項scrollOverflow:true的情況下是必需的 --> <script type="text/javascript" src="vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="fullpage.js"></script> ``` Using Webpack, Browserify or Require.js? Check <a href="https://github.com/alvarotrigo/fullPage.js/wiki/Use-module-loaders-for-fullPage.js">how to use fullPage.js with module loaders</a>. ### 可選用CDN： 如果您傾向使用CDN載入所需文件，fullPage.js在CDNJS： https://cdnjs.com/libraries/fullPage.js ### 要求HTML結構 HTML文件中的首行HTML代碼必須使用[HTML DOCTYPE 聲明](http://www.corelangs.com/html/introduction/doctype.html)，否則可能會遇到代碼段高度問題。HTML 5 doctype中的示例： `<!DOCTYPE html>`. 每個代碼段定義為包含`section`類的元素。 第一個代碼段作為主頁，是默認激活代碼。 代碼段應進行封裝（即`<div id="fullpage">` ）。 封裝不能是`body`元素。 ```html <div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div> ``` 如果你想定義一個與眾不同的起始頁面，而不是原始第一段或第一個滑動頁，只需將`active`類添加到你想首先載入的段或滑動頁。 ```html <div class="section active">Some section</div> ``` 為在代碼段中創建橫向滑塊，每個滑動頁將默認定義為包含`slide`類的元素： ```html <div class="section"> <div class="slide"> 幻燈片 1 </div> <div class="slide"> 幻燈片 2 </div> <div class="slide"> 幻燈片 3 </div> <div class="slide"> 幻燈片 4 </div> </div> ```` 可以在[`simple.html`文件](https://github.com/alvarotrigo/fullPage.js/tree/master/examples/simple.html)看到完整的HTML結構的例子 ### 初始化 #### 用Vanilla Javascript初始化 您只需要在關閉`</body>`標簽之前調用fullPage.js。 ```javascript new fullpage('#fullpage', { //options here autoScrolling:true, scrollHorizontally: true }); //methods fullpage_api.setAllowScrolling(false); ``` #### 使用jQuery進行初始化 如果您需要，您也可以將fullpage.js作為jQuery插件使用！ ```javascript $(document).ready(function() { $('#fullpage').fullpage({ //options here autoScrolling:true, scrollHorizontally: true }); //methods $.fn.fullpage.setAllowScrolling(false); }); ``` 函數和方法仍然可以用jQuery方式調用，如在[fullPage.js v2.X](https://github.com/alvarotrigo/fullPage.js/tree/2.9.7)中一樣。 #### 帶有所有功能選項的Vanilla JS 演示 所有選項設置的更復雜的初始化如下所示： ```javascript var myFullpage = new fullpage('#fullpage', { //導航 menu: '#menu', lockAnchors: false, anchors:['firstPage', 'secondPage'], navigation: false, navigationPosition: 'right', navigationTooltips: ['firstSlide', 'secondSlide'], showActiveTooltip: false, slidesNavigation: false, slidesNavPosition: 'bottom', //滾動 css3: true, scrollingSpeed: 700, autoScrolling: true, fitToSection: true, fitToSectionDelay: 1000, scrollBar: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopBottom: false, loopTop: false, loopHorizontal: true, continuousVertical: false, continuousHorizontal: false, scrollHorizontally: false, interlockedSlides: false, dragAndMove: false, offsetSections: false, resetSliders: false, fadingEffect: false, normalScrollElements: '#element1, .element2', scrollOverflow: false, scrollOverflowReset: false, scrollOverflowOptions: null, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, bigSectionsDestination: null, //可訪問 keyboardScrolling: true, animateAnchor: true, recordHistory: true, //設計 controlArrows: true, verticalCentered: true, sectionsColor : ['#ccc', '#fff'], paddingTop: '3em', paddingBottom: '10px', fixedElements: '#header, .footer', responsiveWidth: 0, responsiveHeight: 0, responsiveSlides: false, parallax: false, parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'}, //自定義選擇器 sectionSelector: '.section', slideSelector: '.slide', lazyLoading: true, //事件 onLeave: function(origin, destination, direction){}, afterLoad: function(origin, destination, direction){}, afterRender: function(){}, afterResize: function(width, height){}, afterResponsive: function(isResponsive){}, afterSlideLoad: function(section, origin, destination, direction){}, onSlideLeave: function(section, origin, destination, direction){} }); ``` ### 創建鏈接到段落或幻燈片 如果你在段落中使用fullPage.js和錨鏈接（在每個部分使用`anchors`選項或屬性`data-anchor`），那么你將能夠在一個段落里使用錨鏈接直接導航到某個幻燈片。 這是一個錨鏈接的例子： http://alvarotrigo.com/fullPage/#secondPage/2 （在你手動訪問該段落/幻燈片就會看到的URL） 請注意，URL的最后部分以`＃secondPage / 2`結尾。 以下初始化： ```javascript new fullpage('#fullpage', { anchors:['firstPage', 'secondPage', 'thirdPage'] }); ``` URL`#secondPage/2` 結尾處的錨分別定義了目標段落和幻燈片。 在前面的URL中，目標段落將是使用錨點 `secondPage` 定義的段落，幻燈片將會是第2張幻燈片，因為我們使用索引 `2` 。 （一個段落的第一個幻燈片有索引0，在技術上這是一個段落）。 如果我們在HTML標記中使用屬性`data-anchor`，就可以使用自定義錨點來代替它的索引： ```html <div class="section"> <div class="slide" data-anchor="slide1"> 幻燈片 1 </div> <div class="slide" data-anchor="slide2"> 幻燈片 2 </div> <div class="slide" data-anchor="slide3"> 幻燈片 3 </div> <div class="slide" data-anchor="slide4"> 幻燈片 4 </div> </div> ``` 在最后一種情況中，我們使用的URL將是`#secondPage/slide3`，這相當于之前的 `#secondPage/2`。 請注意，如果沒有提供`anchors`數組，則也可以使用`data-anchor`屬性以同樣的方式定義節錨點。 **注意！**`data-anchor`標記的值不能與站點上的任何ID元素（或IE的NAME元素）相同。 ### 創建更小或更大的段落 [演示](http://codepen.io/alvarotrigo/pen/BKjRYm) fullPage.js提供了一種方法來刪除段落和幻燈片的全高限制。 可以創建高度小于或大于視口的段落。 這是頁腳的理想方式。 需明白所有段落使用此功能并沒有意義，這一點很重要。 如果網站的初始加載中有多個段落，則fullPage.js將不會滾動以查看下一個段落，因為它已經在視口中。 創建更小的段落，只需在要應用的段落中使用`fp-auto-height` 類即可，則可以調用您的段落/幻燈片中定義的高度。 ```html <div class="section">整個視口</div> <div class="section fp-auto-height">自動高度</div> ``` #### 響應自動高度段落 [演示](https://codepen.io/alvarotrigo/pen/MzByMa) 響應自動高度可以通過使用`fp-auto-height-responsive`類來調用。 這種方式段落將全屏，直到響應模式終止。 根據定義調整大小，可能是大于或小于視口。 ### 由fullpage.js添加的狀態類 Fullpage.js在不同的元素中添加多個類來保存網站狀態的記錄： - `active` 添加當前可見部分并滑動。 - `active` 被添加到當前菜單元素（如果使用`menu`選項）。 - `fp-viewing-SECTION-SLIDE`形式的類被添加到網站的 `body` 元素中。(例如： [`fp-viewing-secondPage-0`](http://alvarotrigo.com/fullPage/#secondPage)) `SECTION`和`SLIDE`部分將成為當前部分和幻燈片的錨（或索引，如果沒有提供錨）。 - 當進入響應模式時，`fp-responsive`添加到`body`元素 - 當啟用fullpage.js時，`fp-enabled` 添加到`html`元素。 （并在銷毀時被移除）。 - 當fullPage.js被銷毀時，`fp-destroyed`被添加到fullpage.js容器中。 ### 延遲加載 [演示](http://codepen.io/alvarotrigo/pen/eNLBXo) fullPage.js提供了一種延遲加載圖像、視頻和音頻元素的方式，這樣它們不會減慢網站的加載速度，也不會浪費數據傳輸。 當使用延遲加載時，所有這些元素只有在進入視口時才會加載。 要啟用延遲加載，您只需將`src`屬性更改為`data-src`，如下所示： ``` <img data-src="image.png"> <video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /> </video> ``` 如果您已經使用另一個使用`data-src`的延遲加載解決方案，則可以通過設置 `lazyLoading: false`選項來禁用fullPage.js延遲加載。 ### 自動播放/暫停嵌入式媒體 **注意**：根據操作系統和瀏覽器的不同，自動播放功能可能無法在某些移動設備上使用（即[iOS的Safari](https://webkit.org/blog/6784/new-video-policies-for-ios/) 版本 < 10.0）。 #### 播放部分/幻燈片載入： 對于視頻或音頻使用屬性 `autoplay`，或者對于youtube iframe使用參數`autoplay=1`將使得在加載頁面時播放媒體元素。 在段落/幻燈片載入使用而不是屬性`data-autoplay`播放。 例如： ```html <audio data-autoplay> <source src="http://metakoncept.hr/horse.ogg" type="audio/ogg"> </audio> ``` #### 暫停 嵌入式HTML5`<video>`/`<audio>`和Youtube iframe在離開某個段落或幻燈片時自動暫停。 可以通過使用屬性`data-keepplaying`來禁用。 例如： ```html <audio data-keepplaying> <source src="http://metakoncept.hr/horse.ogg" type="audio/ogg"> </audio> ``` ### 使用擴展 fullpage.js [提供了一組擴展](http://alvarotrigo.com/fullPage/extensions/)您可以使用它來增強其默認功能。 所有這些都被列為 [fullpage.js 選項](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E9%80%89%E9%A1%B9). 擴展需要使用在[`dist` 文件夾](https://github.com/alvarotrigo/fullPage.js/tree/master/dist/)中的縮小文件 [`fullpage.extensions.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/dist/fullpage.extensions.min.js)，而不是通常的fullPage.js文件 (`fullpage.js` 或 `fullpage.min.js`)。 一旦你需要擴展文件，你需要在fullPage之前添加它。 例如，如果我想要使用Continuos Horizontal擴展，我將包含擴展文件，然后包含fullPage文件的擴展版本。 ```html <script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script> <script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script> ``` 每個擴展都需要激活密鑰和許可證密鑰。[在這里看到更多細節](https://github.com/alvarotrigo/fullPage.js/blob/master/lang/chinese/how-to-activate-fullpage-extension.md). 然后你就可以按照[選項](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E9%80%89%E9%A1%B9)的說明使用和配置它們。 ## 選項 -`licenseKey`：（默認`null`）。 **此選項是強制性的。**如果您在非開源項目中使用fullPage，則應使用購買fullPage商業許可證時提供的許可證密鑰。 如果您的項目是開放的，請[與我[聯系](https://alvarotrigo.com/#contact)并提供指向您的存儲庫的鏈接以獲取許可證密鑰。 請閱讀更多關于許可[這里]（https://github.com/alvarotrigo/fullPage.js#license）和[在網頁上]（https://alvarotrigo.com/fullPage/pricing/）。例如： ```javascript new fullpage({ licenseKey: 'YOUR_KEY_HERE' }); ``` - `v2compatible`: (默認 `false`). 確定是否使其與版本2編寫的任何代碼100％兼容，忽略版本3的新功能或api更改。狀態類，回調簽名等的工作方式與在版本2上完全相同。**請注意該選項將在之后的某個時候被刪除。**。 - `controlArrows`：（默認為 `true`）確定是否將幻燈片的控制箭頭向右或向左移動。 - `verticalCentered`：（默認為`true`）在段落內部垂直居中。 當設置為`true`時，您的代碼將被庫包裝。可考慮使用委托或在`afterRender`回調中加載其他腳本。 - `scrollingSpeed`：（默認`700`）滾動轉換的速度（以毫秒為單位）。 - `sectionsColor`：（默認`none`）為每個部分定義CSS`background-color`屬性。 例： ```javascript new fullpage('#fullpage', { sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], }); ``` - `anchors`：（默認`[]`）定義要在每個部分的URL上顯示的錨鏈接（#example）。 錨點的值應該是獨一無二的。 數組中的錨的位置將限定錨被應用于哪些部分。 （第二部分的第二個位置等等）。 通過瀏覽器也可以使用錨點向前和向后導航。 該選項還允許用戶為特定的部分或幻燈片添加書簽。 **注意！**錨點不能與站點上的任何ID元素（或IE的NAME元素）具有相同的值。 現在可以通過使用屬性`data-anchor`直接在HTML結構中定義錨點，如此處所述。 - `lockAnchors`：（默認為`false`）確定URL中的錨是否在庫中完全有效。 您仍然可以在函數和回調內部使用錨，但是它們在滾動網站時不起任何作用。 如果你想在URL中使用錨點來將fullPage.js和其他插件結合起來，那就很有用。 **重要**理解 `anchors`選項數組中的值通過在標記中的位置直接關聯到具有`.section` 類的元素是有幫助的。 - `easing`:(默認`easeInOutCubic`）定義用于垂直和水平滾動的過渡效果。 它需要文件`vendors / easings.min.js`或[jQuery UI](http://jqueryui.com/)來使用[它的轉換](http://api.jqueryui.com/easings/)。 其他庫可以用來代替。 - `easingcss3`: （默認`ease`）定義在使用`css3：true`的情況下使用的過渡效果。 你可以使用[預定義的](http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp)（比如`linear`，`ease-out` ...）或者使用`立方bezier`功能創建你自己的。 你可能想使用[Matthew Lein CSS緩動動畫工具](http://matthewlein.com/ceaser/)。 - `loopTop`:（默認為`false`）定義在第一節中向上滾動是否滾動到最后一個。 - `loopBottom`: （默認為`false`）定義滾動到最后一節是否應該滾動到第一個。 - `loopHorizontal`:（默認為`true`）定義水平滑塊是否在到達上一張或上一張幻燈片后循環。 - `css3`: （默認`true`）。 定義是否使用JavaScript或CSS3變換在部分和幻燈片中滾動。 有助于通過支持CSS3的瀏覽器加速平板電腦和移動設備的移動。 如果此選項設置為`true`，并且瀏覽器不支持CSS3，則將使用后備。 - `autoScrolling`: （默認為`true`）定義是使用“自動”滾動還是“正常”滾動。 它同時也影響了平板電腦和移動電話中瀏覽器/設備窗口部分適配的方式。 - `fitToSection`: （默認為`true`）確定是否節放入視口中。 當設置為`true`時，當前活動節將始終填充整個視口。 否則，用戶可以自由地停留在一個節的中間（何時） - `fitToSectionDelay`: （默認1000）。 如果`fitToSection`設置為true，則延遲 以毫秒為單位進行擬合。 - `scrollBar`: （默認`false`）確定是否使用站點的滾動條。 在使用滾動條的情況下，`autoScrolling`功能仍將按預期工作。 用戶也可以使用滾動條自由滾動網站，當滾動完成時，fullPage.js將適配屏幕上的部分。 - `paddingTop`: （默認`0`）用數值和度量（paddingTop：'10px'，paddingTop：'10em'...）定義每個部分的頂部填充。 - `paddingBottom`: （默認為`0`）用數值和度量（paddingBottom：'10px'，paddingBottom：'10em'...）定義每個部分的底部填充。 使用固定頁腳的情況下會有用。 - `fixedElements`: （默認`null`）定義當使用`css3`選項保持固定時，哪些元素將從插件的滾動結構中移除。 它需要一個字符串與這些元素的Javascript選擇器。 （例如：`fixedElements：'＃element1，.element2'`） - `normalScrollElements`: （默認`null`）如果你想在滾動某些元素時避免自動滾動，這是你需要使用的選項。 （地圖，滾動div等有用）它需要一個字符串與這些元素的Javascript選擇器。 （例如：`normalScrollElements：'＃element1，.element2'`）。 此選項不應該應用于任何節/幻燈片元素本身。 - `normalScrollElementTouchThreshold` : （默認`5`）定義html節點樹的跳數閾值Fullpage將測試`normalScrollElement`是否匹配，以允許在觸摸設備上的div的滾動功能。 （例如：`normalScrollElementTouchThreshold：3`） - `bigSectionsDestination`: （默認`null`）定義如何滾動到比視口大的部分。 默認情況下，如果您來自目的地上方的部分，fullPage.js將滾動到頂部，如果您來自目的地之下的部分，則會滾動到底部。 可能的值是`top`，`bottom`，`null`。 - `keyboardScrolling`: （默認為`true`）定義是否可以使用鍵盤瀏覽內容。 - `touchSensitivity`: （默認`5`）定義瀏覽器窗口寬度/高度的百分比，以及滑動到下一個節/幻燈片必須測量的距離 - `continuousVertical`:（默認為`false`）定義是否在最后一個區段向下滾動，或是否應該向下滾動到第一個區段，或如果在第一個區段向上滾動時是否應該滾動到最后一個區段。 不兼容`loopTop`，`loopBottom`或站點中存在的任何滾動條（`scrollBar：true`或`autoScrolling：false`）。 - `continuousHorizontal`: （默認`false`）[fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 定義在最后一張幻燈片中向右滑動是否應該向右滑動到第一張幻燈片，或者如果在第一張幻燈片中向左滾動是否應向左滑動到最后一張。 不兼容`loopHorizontal`。 需要fullpage.js> = 2.8.3。 - `scrollHorizontally`:（默認`false`）[fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 定義是否使用鼠標滾輪或觸控板在滑塊內水平滑動。 講故事的理想選擇。 需要fullpage.js> = 2.8.3。 - `interlockedSlides`: （默認`false`）[fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 確定移動一個水平滑塊是否會強制滑塊在其他段落中的滑動方向相同。 可能的值是`true`，`false`或帶有互鎖部分的數組。 例如`[1,3,5]`從1開始。需要fullpage.js> = 2.8.3。 - `dragAndMove`: （默認`false`）[fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 啟用或禁用鼠標或手指拖動和滑動部分和幻燈片。 需要fullpage.js> = 2.8.9。 可能的值是： - `true`: 啟用該功能。 - `false`: 禁用該功能。 - `vertical`: 只能在垂直情況下啟用該功能。 - `horizontal`: 只能在水平情況下啟用該功能。 - `fingersonly`: 僅啟用觸摸設備的功能。 - `mouseonly`: 僅啟用桌面設備的功能（鼠標和觸控板）。 - `offsetSections`: （默認`false`）[fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 提供基于百分比使用非全屏幕部分的方法。 通過顯示下一部分或上一部分的內容，向訪問者顯示網站中的更多內容的理想選擇。 需要fullPage.js> = 2.8.8 要定義每個部分的百分比，必須使用屬性`data-percentage`。 可以通過在屬性`data-centered`中使用布爾值來確定視口中該部分的居中（如果未指定，則默認為`true`）。 例如： ``` html <div class="section" data-percentage="80" data-centered="true"> ``` - `resetSliders`: （默認`false`）。 [fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 定義是否在離開節后重置每個滑塊。 需要fullpage.js> = 2.8.3。 - `fadingEffect`: （默認`false`）。 [fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 定義是否使用淡入淡出效果，而不是默認的滾動效果。 可能的值是`true`，`false`，`sections`，`slides`。 因此，可以垂直或水平地應用，或者同時應用于兩者。 需要fullpage.js> = 2.8.6。 - `animateAnchor`: （默認`true`）定義給定錨點（＃）的站點的負載是否會隨著動畫滾動到其目的地或直接加載給定部分。 - `recordHistory`: （默認為`true`）定義是否將網站的狀態推送到瀏覽器的歷史記錄。 設置為`true`時，網站的每個部分/幻燈片將作為新頁面，瀏覽器的后退和前進按鈕將滾動部分/幻燈片以達到網站的上一個或下一個狀態。 當設置為`false`時，URL將保持更改，但不會影響瀏覽器的歷史記錄。 使用`autoScrolling：false`時，該選項會自動關閉。 - `menu`: （默認`false`）選擇器可以用來指定菜單鏈接到部分。 這樣，節的滾動將使用`active類激活菜單中的相應元素。 這將不會生成菜單，而只是將`active類添加到給定菜單中的元素，并帶有相應的錨鏈接。 為了將菜單的元素與各個部分相鏈接，將需要一個HTML 5數據標簽（`data-menuanchor`）來使用這些部分中使用的錨鏈接。 例： ```html <ul id="myMenu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">第一節</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">第二節</a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage">第三節</a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage">第四節</a></li> </ul> ``` ```javascript new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu' }); ``` **注意：** 菜單元素應放置在整頁包裝外，以避免使用`css3：true`時出現問題。 否則它會被插件本身附加到`body`。 - `navigation`: （默認`false`）如果設置為`true`，則會顯示一個由小圓圈組成的導航欄。 - `navigationPosition`: （默認`none`）可以設置為`left`或`right`，并定義導航欄顯示的位置（如果使用的話）。 - `navigationTooltips`: （默認為[]）定義要使用導航圈的工具提示。 例如：`navigationTooltips：['firstSlide'，'secondSlide']`。 如果您愿意，也可以在每個部分中使用屬性`data-tooltip`來定義它們。 - `showActiveTooltip`: （默認為`false`）顯示垂直導航中主動查看節的持久工具提示。 - `slidesNavigation`: （默認為`false`）如果設置為`true`，則會顯示一個導航欄，該導航欄由站點上每個橫向滑塊的小圓圈組成。 - `slidesNavPosition`: （默認`bottom`）定義滑塊的橫向導航欄的位置。 值為`top`和`bottom`。 您可能需要修改CSS樣式以確定從頂部或底部以及任何其他樣式（如顏色）的距離。 - `scrollOverflow`: （默認為`false`）定義在內容大于它的高度的情況下是否為節/幻燈片創建滾動。 當設置為`true`時，您的內容將被插件包裝。 考慮使用委托或在`afterRender`回調中加載其他腳本。 如果設置為`true`，則需要庫[`scrolloverflow.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/scrolloverflow.min.js)。 這個文件必須在fullPage.js插件之前而非jQuery（在使用它的情況下）加載。 例如： ```html <script type="text/javascript" src="vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="fullpage.js"></script> ``` 為了防止fullpage.js在某些節或幻燈片中創建滾動條，請使用`fp-noscroll`類。 例如： `<div class="section fp-noscroll">` 在section元素中使用`fp-auto-height-responsive`時，您也可以防止scrolloverflow應用于響應模式。 - `scrollOverflowReset`:（默認`false`）[fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 如果設置為`true`，當離開另一個垂直節時，使用滾動條向上滾動節/幻燈片的內容。 這樣，即使從下面的節滾動，節/幻燈片也會始終顯示其內容的開始。 - `scrollOverflowOptions`: 當使用scrollOverflow：true時，fullpage.js將使用[iScroll.js庫文件](https://github.com/cubiq/iscroll/)的分叉和修改版本。 您可以通過為要使用的iScroll.js選項提供fullpage.js來自定義滾動行為。 查看[它的文檔](https://github.com/cubiq/iscroll)了解更多信息。 - `sectionSelector`: （默認`.section`）定義用于插件部分的Javascript選擇器。 有時可能需要更改，以避免與使用與fullpage.js相同的選擇器的其他插件的問題。 - `slideSelector`: （默認`.slide`）定義用于插件幻燈片的Javascript選擇器。 有時可能需要更改，以避免與使用與fullpage.js相同的選擇器的其他插件的問題。 - `responsiveWidth`: （默認`0`）一個正常的滾動（`autoScrolling：false`）將在定義的寬度下以像素為單位使用。 如果用戶希望將自己的響應式CSS用于身體標記，則會將`fp-responsive`類添加到身體標記中。 例如，如果設置為900，則每當瀏覽器的寬度小于900時，插件將像正常站點一樣滾動。 - `responsiveHeight`: （默認`0`）一個正常的滾動（`autoScrolling：false`）將在定義的高度下以像素為單位使用。 如果用戶希望將自己的響應式CSS用于身體標記，則會將`fp-responsive`類添加到身體標記中。 例如，如果設置為900，則每當瀏覽器的高度小于900時，插件將像正常站點一樣滾動。 - `responsiveSlides`: （默認`false`）[fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 設置為`true`時，在響應模式被觸發時，幻燈片將變成垂直節。 （通過使用上面詳述的`responsiveWidth`或`responsiveHeight`選項）。 需要fullpage.js> = 2.8.5。 - `parallax`: （默認`false`）[fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 定義是否在節/幻燈片上使用視差背景效果。 [詳細了解如何應用視差選項](https://github.com/alvarotrigo/fullPage.js/blob/master/lang/chinese/parallax-extension.md). - `parallaxOptions`: （默認：`{type：'reveal'，percent：62，property：'translate'}`）。 允許在使用選項parallax:true時配置視差背景效果的參數。 [詳細了解如何應用視差選項](https://github.com/alvarotrigo/fullPage.js/blob/master/lang/chinese/parallax-extension.md). - `lazyLoading`: （默認`true`）延遲加載默認是激活的，這意味著它會延遲加載包含屬性`data-src`的任何媒體元素，詳見[Lazy Loading docs](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD)。 如果你想使用任何其他的后加載庫，你可以禁用這個fullpage.js功能。 ## 方法 你可以在[這里](http://alvarotrigo.com/fullPage/examples/methods.html)看到它們 ### getActiveSection() [示例](https://codepen.io/alvarotrigo/pen/VdpzRN/) 獲取包含活躍部分及其屬性的對象（鍵入[Section](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#callbacks））。 ```javascript fullpage_api.getActiveSection(); ``` ### getActiveSlide() [示例](https://codepen.io/alvarotrigo/pen/VdpzRN/) 獲取包含活躍部分及其屬性的對象（鍵入[Slide](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#callbacks））。）。 ```javascript fullpage_api.getActiveSlide(); ``` ### moveSectionUp() [示例](http://codepen.io/alvarotrigo/pen/GJXNMN) 向上滾動一節： ```javascript fullpage_api.moveSectionUp(); ``` --- ### moveSectionDown() [示例](http://codepen.io/alvarotrigo/pen/jPvVZx) 向下滾動一節： ```javascript fullpage_api.moveSectionDown(); ``` --- ### moveTo(第節, 幻燈片) [示例](http://codepen.io/alvarotrigo/pen/doqOmY) 將頁面滾動到給定節并滑動。 第一張幻燈片，默認情況下，將有索引0。 ```javascript /*滾動到錨鏈接`firstSlide`和第二張幻燈片的部分 */ fullpage_api.moveTo('firstSlide', 2); ``` ```javascript //滾動到網站的第三節 fullpage_api.moveTo(3, 0); //這是一樣的 fullpage_api.moveTo(3); ``` --- ### silentMoveTo(第節, 幻燈片) [示例](http://codepen.io/alvarotrigo/pen/doqOeY) 與[`moveTo`](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#moveto%E7%AC%AC%E8%8A%82-%E5%B9%BB%E7%81%AF%E7%89%87)完全相同，但是在這種情況下，它將執行沒有動畫的滾動。 直接跳到目的地。 ```javascript /*滾動到錨鏈接`firstSlide`和第二張幻燈片的部分 */ fullpage_api.silentMoveTo('firstSlide', 2); ``` --- ### moveSlideRight() [示例](http://codepen.io/alvarotrigo/pen/Wvgoyz) 將當前節的水平滑塊滾動到下一張幻燈片： ```javascript fullpage_api.moveSlideRight(); ``` --- ### moveSlideLeft() [示例](http://codepen.io/alvarotrigo/pen/gpdLjW) 將當前節的水平滑塊滾動到上一張幻燈片: ```javascript fullpage_api.moveSlideLeft(); ``` --- ### setAutoScrolling(boolean) [示例](http://codepen.io/alvarotrigo/pen/rVZWrR) 實時設置滾動配置。 定義頁面滾動行為的方式。 如果設置為`true`，則將使用"自動"滾動，否則將使用站點的"手動"或"正常"滾動。 ```javascript fullpage_api.setAutoScrolling(false); ``` --- ### setFitToSection(boolean) [示例](http://codepen.io/alvarotrigo/pen/GJXNYm) 設置選項`fitToSection`的值，確定是否適合屏幕中的部分。 ```JavaScript fullpage_api.setFitToSection(false); ``` --- ### fitToSection() [示例](http://codepen.io/alvarotrigo/pen/JWWagj) 滾動到最近的適合視口的活動節。 ```javascript fullpage_api.fitToSection(); ``` --- ### setLockAnchors(boolean) [示例](http://codepen.io/alvarotrigo/pen/yNxVRQ) 設置選項`lockAnchors`的值，確定錨是否在URL中有效。 ```javascript fullpage_api.setLockAnchors(false); ``` --- ### setAllowScrolling(boolean, [directions]) [示例](http://codepen.io/alvarotrigo/pen/EjeNdq) 添加或刪除通過使用鼠標滾輪/觸控板或觸摸手勢（默認處于活動狀態）滾動節/幻燈片的可能性。 注意這不會禁用鍵盤滾動。 您將需要使用`setKeyboardScrolling`。 - `directions`：（可選參數）允許的值：`all`，`up`，`down`，`left`，`right`或者它們的組合，用`down，right`等逗號分隔。 它定義了滾動將被啟用或禁用的方向。 ```javascript //禁用滾動 fullpage_api.setAllowScrolling(false); //禁用向下滾動 fullpage_api.setAllowScrolling(false, 'down'); //禁用向下和向右滾動 fullpage_api.setAllowScrolling(false, 'down, right'); ``` --- ### setKeyboardScrolling(boolean, [directions]) [示例](http://codepen.io/alvarotrigo/pen/GJXNwm) 添加或刪除通過使用鍵盤（默認情況下處于活動狀態）滾動節的可能性。 - `directions`: （可選參數）允許的值：`all`，`up`，`down`，`left`，`right`或者它們的組合，用`down，right`等逗號分隔。 它定義了滾動將被啟用或禁用的方向。 ```javascript //禁用所有鍵盤滾動 fullpage_api.setKeyboardScrolling(false); //禁用鍵盤向下滾動 fullpage_api.setKeyboardScrolling(false, 'down'); //禁用鍵盤向下和向右滾動 fullpage_api.setKeyboardScrolling(false, 'down, right'); ``` --- ### setRecordHistory(boolean) [示例](http://codepen.io/alvarotrigo/pen/rVZWQb) 定義是否在URL中記錄每個散列更改的歷史記錄。 ```javascript fullpage_api.setRecordHistory(false); ``` --- ### setScrollingSpeed(milliseconds) [示例](http://codepen.io/alvarotrigo/pen/NqLbeY) 定義以毫秒為單位的滾動速度。 ```javascript fullpage_api.setScrollingSpeed(700); ``` --- ### destroy(type) [示例](http://codepen.io/alvarotrigo/pen/bdxBzv) 銷毀插件事件以及可選的HTML標記和樣式。使用AJAX加載內容時的理想選擇。 - `type`: （可選參數）可以為空或`all`。 如果`all`被傳遞，fullpage.js使用的HTML標記和樣式將被刪除。 這樣，原始的HTML標記，即任何插件修改之前使用的標記都將被保留。 ```javascript //銷毀由fullPage.js創建的所有Javascript事件（URL中的卷動，hashchange） fullpage_api.destroy(); //銷毀所有的JavaScript事件，以及在原始HTML標記中由fullPage.js所做的任何修改。 fullpage_api.destroy('all'); ``` --- ### reBuild() 更新DOM結構以適應新的窗口大小或其內容。 ? 非常適合與AJAX調用或站點的DOM結構中的外部更改結合使用，特別是在使用`scrollOverflow：true`時。 ```javascript fullpage_api.reBuild(); ``` --- ### setResponsive(boolean) [示例](http://codepen.io/alvarotrigo/pen/WxOyLA) 設置頁面的響應模式。 當設置為`true`時，自動滾動將被關閉，結果與`responsiveWidth`或`responsiveHeight`選項被觸發時的結果完全相同。 ```javascript fullpage_api.setResponsive(true); ``` --- ### responsiveSlides.toSections() [fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 需要fullpage.js> = 2.8.5。將水平幻燈片變成垂直節。 ```javascript fullpage_api.responsiveSlides.toSections(); ``` --- ### responsiveSlides.toSlides() [fullpage.js的擴展](http://alvarotrigo.com/fullPage/extensions/)。 需要fullpage.js> = 2.8.5。將原始幻燈片（現轉換為垂直節）重新轉換為水平幻燈片。 ```javascript fullpage_api.responsiveSlides.toSlides(); ``` ## Callbacks [示例](http://codepen.io/alvarotrigo/pen/XbPNQv) 你可以在[這里](http://alvarotrigo.com/fullPage/examples/callbacks.html)看到他們。 一些回調，例如`onLeave`將包含`Section`或`Slide`類型的參數。 這些對象將包含以下屬性： - `anchor`: *(String)* 項目的anchorLink。 - `index`: *(Number)* 項目的index。 - `item`: *(DOM element)* 項目元素。 - `isFirst`: *(Boolean)* 判斷游標是否在第一行。 - `isLast`: *(Boolean)* 判斷游標是否在最后一行。 ### afterLoad (`origin`, `destination`, `direction`) 滾動結束之后，一旦加載了節，就會觸發回調。參數： - `origin`: *(Object)* active section - `destination`: *(Object)* 終點部分。 - `direction`: *(String)* 它將根據滾動方向采用`up`或`down`值。 例如： ```javascript new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterLoad: function(origin){ var loadedSection = this; //使用 index if(origin.index == 2){ alert("第3節停止加載"); } //使用 anchorLink if(origin.anchor == 'secondSlide'){ alert("第2節停止加載"); } } }); ``` --- ### onLeave (`origin`, `destination`, `direction`) 一旦用戶離開某個節，過渡到新節，就會觸發此回調。 返回“false”將在移動發生之前取消移動。 參數： - `origin`: *(Object)* 起始部分 - `destination`: *(Object)* 終點部分。 - `direction`: *(String)* 它將根據滾動方向采用`up`或`down`值。 例如： ```javascript new fullpage('#fullpage', { onLeave: function(index, nextIndex, direction){ var leavingSection = this; //離開第二節后 if(origin.index == 1 && direction =='down'){ alert("前往第3節！"); } else if(origin.index == 1 && direction == 'up'){ alert("前往第1節！"); } } }); ``` #### 觸發之前取消滾動 您可以通過在`onLeave`回調函數上返回`false`來取消滾動： ```javascript new fullpage('#fullpage', { onLeave: function(origin, destination, direction){ //如果目標是第三節，它將不會滾動 if(destination.index == 2){ return false; } } }); ``` --- ### afterRender() 這個回調在頁面結構生成后立即被觸發。 這是您要用來初始化其他插件的回調函數，或者觸發任何需要文檔準備就緒的代碼（因為這個插件修改了DOM來創建結果的結構）。 請參閱[常見問題](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions)了解更多信息。 例如： ```javascript new fullpage('#fullpage', { afterRender: function(){ var pluginContainer = this; alert("DOM結構已完成"); } }); ``` --- ### afterResize() 調整瀏覽器窗口大小后，會觸發此回調。 就在節被調整之后。 參數： - `width`: *(Number)* 屏幕寬度。 - `height`: *(Number)* 屏幕高度。 例如： ```javascript new fullpage('#fullpage', { afterResize: function(width, height){ var pluginContainer = this; alert("節已重新調整大小"); } }); ``` --- ### afterResponsive(`isResponsive`) 在fullpage.js從正常模式變為響應模式或從響應模式變為正常模式之后，此回調將被觸發。 參數： - `isResponsive`：*(Boolean)* 布爾值，用于確定是否進入響應模式（`true`）或返回正常模式（`false`）。 例如： ```javascript new fullpage('#fullpage', { afterResponsive: function(isResponsive){ alert("是否響應" + isResponsive); } }); ``` --- ### afterSlideLoad (`section`, `origin`, `destination`, `direction`) 滾動結束后，加載一個節的幻燈片后觸發回調。 參數： - `section`: *(Object)* 活躍垂直部分。 - `origin`: *(Object)*水平滑動起始。 - `destination`: *(Object)*水平滑動終點。 - `direction`: *(String)* `它將根據滾動方向采用right` 或 `left` 值。 例如： ```javascript new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterSlideLoad: function( section, origin, destination, direction){ var loadedSlide = this; //第二節的第一張幻燈片 if(section.anchor == 'secondPage' && destination.index == 1){ alert("第一張幻燈片加載完畢"); } //第二節的第二張幻燈片（假設#secondSlide是 //為第二張幻燈片錨點 if(section.index == 1 && destination.anchor == 'secondSlide'){ alert("第二張幻燈片加載完畢"); } } }); ``` --- ### onSlideLeave (`section`, `origin`, `destination`, `direction`) 一旦用戶離開幻燈片轉到另一個幻燈片，就會觸發此回調。返回`false`將在移動發生之前取消移動。 參數： - `section`: *(Object)* active vertical section. - `origin`: *(Object)* horizontal slide of origin. - `destination`: *(Object)* destination horizontal slide. - `direction`: *(String)* `right` or `left` depending on the scrolling direction. 例如： ```javascript new fullpage('#fullpage', { onSlideLeave: function( section, origin, destination, direction){ var leavingSlide = this; //留下第二節的第一張幻燈片 if(section.index == 1 && origin.index == 0 && direction == 'right'){ alert("離開第一張幻燈片！"); } //將第二節的第三張幻燈片留在左邊 if(section.index == 1 && origin.index == 2 && direction == 'left'){ alert("前往第二張幻燈片！"); } } }); ``` #### 在發生移動之前取消移動 您可以通過在`onSlideLeave`回調中返回`false`來取消移動。 [與使用`onLeave`取消動作一樣](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese/#%E8%A7%A6%E5%8F%91%E4%B9%8B%E5%89%8D%E5%8F%96%E6%B6%88%E6%BB%9A%E5%8A%A8)。 # 報告問題 1.請在提問之前使用github問題搜索查找您的問題。 2.確保使用最新的fullpage.js版本。 不支持舊版本。 3.使用[Github問題論壇](https://github.com/alvarotrigo/fullPage.js/issues)來創建問題。 4.**需要單獨復制該問題**使用[jsfiddle](https://jsfiddle.net/alvarotrigo/ea17skjr/)或[codepen](http://codepen.io/alvarotrigo/pen/NxyPPp)，如果可能的話。 # 貢獻給fullpage.js 請參閱[貢獻給fullpage.js](https://github.com/alvarotrigo/fullPage.js/wiki/Contributing-to-fullpage.js) # 更新日志 要查看最近更改的列表，請參見[發行版部分](https://github.com/alvarotrigo/fullPage.js/releases). # 構建任務 想要構建fullpage.js分發文件？ 請參閱[Build Tasks](https://github.com/alvarotrigo/fullPage.js/wiki/Build-tasks) # 參考資源 - [Wordpress theme](http://alvarotrigo.com/fullPage/utils/wordpress.html) - [Official Vue.js wrapper component](https://github.com/alvarotrigo/vue-fullpage.js) - [Official React.js wrapper component](https://github.com/alvarotrigo/react-fullpage) - [Official Angular wrapper component](https://github.com/alvarotrigo/angular-fullpage) - [CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) (用于定義`easingcss3`的值) - [fullPage.js jsDelivr CDN](https://www.jsdelivr.com/package/npm/fullpage.js) - [fullPage.js plugin for October CMS](http://octobercms.com/plugin/freestream-parallax) - [fullPage.js wordpress plugin](https://wordpress.org/plugins/wp-fullpage/) - [fullPage.js Angular2 directive](https://github.com/meiblorn/ng2-fullpage) - [fullPage.js angular directive](https://github.com/hellsan631/angular-fullpage.js) - [fullPage.js ember-cli addon](https://www.npmjs.com/package/ember-cli-fullpagejs) - [fullPage.js Rails Ruby Gem](https://rubygems.org/gems/fullpagejs-rails) - [Angular fullPage.js - Adaptation for Angular.js v1.x](https://github.com/mmautomatizacion/angular-fullpage.js) - [Integrating fullPage.js with Wordpress (Tutorial)](http://premium.wpmudev.org/blog/build-apple-inspired-full-page-scrolling-pages-for-your-wordpress-site/) ## 誰在使用 fullPage.js 如果你想讓你的頁面在這里列出。 請使用網址<a href="mailto:alvaro@alvarotrigo.com">與我聯系</a>。 [](http://www.yourprimer.com/) [](https://www.coca-colacompany.com/annual-review/2017/index.html)  [](http://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02)      [](http://www.vogue.fr/chaumet-histoires-de-liens)  [](https://www.x-class.com.au/) [](http://www.sanyang.com.tw/service/Conception/)  [](https://www.edarling.de/)  - https://www.coca-colacompany.com/annual-review/2017/index.html - http://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02 - https://www.x-class.com.au - http://www.yourprimer.com/ - http://www.vogue.fr/chaumet-histoires-de-liens - http://burntmovie.com/ - http://www.newjumoconcept.com/ - http://www.shootinggalleryasia.com/ - http://medoff.ua/en/ - http://promo.prestigio.com/grace1/ - http://www.commoditiesdemystified.info/en/ - http://torchbrowser.com/ - http://thekorner.fr/ - https://www.edarling.de/ - http://urban-walks.com/ - http://lingualeo.com/ - http://charlotteaimes.com/ - http://collection.madeofsundays.com - http://www.boxreload.com/ - http://educationaboveall.org/ - http://camfindapp.com/ - http://rockercreative.com/ - http://usescribe.com/ - http://lucilecazanave.com/ - http://boxx.hk/ - http://bearonunicycle.com/ - http://rawmilk.dk/en/ - http://www.famavolat.com/ - http://www.sanyang.com.tw/service/Conception/ - http://www.batzaya.net/ - http://medissix.com/ - http://trasmissione-energia.terna.it/ - http://www.thefoodmovie.com/ - http://www.villareginateodolinda.it - http://www.kesstrio.com - http://ded-morozz.kiev.ua/ - http://unabridgedsoftware.com/ - http://atlanticcorp.us/ - http://moysport.ru/ - http://themify.me/demo/#theme=fullpane - http://dancingroad.com - http://www.camanihome.com/ - https://life2film.com/en/ 你可以找到另一個列表[這里](http://libscore.com/#$.fn.fullpage). ## 捐獻 非常歡迎您的捐款:) [Patreon page](https://www.patreon.com/fullpagejs) [](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=BEK5JQCQMED4J&lc=GB&item_name=fullPage%2ejs&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) ## Sponsors Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://alvarotrigo.com/#contact)] | [[Become a patreon](https://www.patreon.com/fullpagejs)] [](https://www.stackpath.com/) [](http://www.browserstack.com/) [](https://hostpresto.com/?utm_source=alvaro) [](https://codepen.com) [](https://www.codefirst.co.uk) ### People <a href="https://github.com/donsalvadori" target="_blank" rel="nofollow"> <img src="http://wallpapers-for-ipad.com/fullpage/imgs3/avatars/donsalvadori.jpg"> </a>