FullPage
基于 jQuery的插件，它能夠很方便、很輕松的制作出全屏滾動(dòng)網(wǎng)站
- 注意：由于fullPage.js 是一個(gè)基于 jQuery 的插件,所以需要先引入jQuery.js
<script src="js/jquery-3.1.1.js"></script>
<script src="js/easings.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/fullpage.js"></script>
new fullpage(){}
- 設(shè)置每一屏的背景顏色
sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
- 顯示指示器
navigation: true
- 設(shè)置指示器的提示信息
navigationTooltips: ['111111111111111','222222222222','3333333333333333','4444444444444']
- 讓指示器的提示信息默認(rèn)就顯示
showActiveTooltip: true
- 設(shè)置指示器顯示的位置(可以是左邊, 也可以是右邊)
navigationPosition: 'left'
- 滾動(dòng)到最后一屏或者第一屏是否要接著滾動(dòng)
// loopBottom: true,
// loopTop: true,
continuousVertical: true,
- onLeave (origin, destination, direction)
onLeave: function (origin, destination, direction) {
console.log("滾動(dòng)之前調(diào)用", origin, destination, direction);
},
// 一旦用戶離開某個(gè)節(jié)，過渡到新節(jié)，就會(huì)觸發(fā)此回調(diào)。 返回“false”將在移動(dòng)發(fā)生之前取消移動(dòng)
//origin: (Object) 起始章節(jié)相關(guān)信息
//destination: (Object) 目標(biāo)章節(jié)相關(guān)信息。
//direction: (String) 它將根據(jù)滾動(dòng)方向采用up或down值。
*/
- afterLoad (origin, destination, direction)
afterLoad: function (origin, destination, direction) {
console.log("滾動(dòng)之后調(diào)用", origin, destination, direction);
}
//滾動(dòng)結(jié)束之后，一旦加載了節(jié)，就會(huì)觸發(fā)回調(diào)。參數(shù)：
//origin: (Object) 起始章節(jié)相關(guān)信息
//destination: (Object) 目標(biāo)章節(jié)相關(guān)信息。
//direction: (String) 它將根據(jù)滾動(dòng)方向采用up或down值。
- 滾動(dòng)到上一屏
fullpage_api.moveSectionUp()
- 滾動(dòng)到下一屏
fullpage_api.moveSectionDown()
- 滾動(dòng)到指定屏
fullpage_api.moveTo(num)
- 獲取當(dāng)前屏
fullpage_api.getActiveSection()
