fullpage

時間 2019-11-17

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fullpage</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.css">
<style>
.slide{
text-align: center;
}
#fullpageMenu{
position: fixed;
top: 0;
z-index: 999;
}
</style>
</head>
<body>
<ul id="fullpageMenu">
<li data-menuanchor='page1' class="active"><a href="#page1">1 section</a></li>
<li data-menuanchor='page2'><a href="#page2">2 section</a></li>
<li data-menuanchor='page3'><a href="#page3">3 section</a></li>
<li data-menuanchor='page4'><a href="#page4">4 section</a></li>
</ul>

<div id="fullpage">
<div class="section">這是第一個頁面</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 class="section">這是第三個頁面</div>

<div class="section">這是第四個頁面</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.js'></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
//設置background-color屬性
sectionsColor:['blue','green','orange','red'],css

//定義是否經過箭頭來控制slide幻燈片，默認爲true.在移動設備上可一個經過滑動來操做幻燈片
controlArrows:true,html

//每一頁的內容是否垂直居中
verticalCentered:true,jquery

//字體是否隨着頁面縮放而縮放，默認值爲false
resize:false,web

//滾動速度,默認爲700 單位ms
scrollingSpeed:700,ajax

/*、定義錨連接，默認值爲[]。有了錨連接用戶能夠快速打開定位到某一頁面。定義錨連接的時候，值不要和頁面中任意的id或name相同，尤爲在IE瀏覽器下。並且定義時不須要加#*/
anchors:['page1','page2','page3','page4'],瀏覽器

/*是否鎖定錨連接，默認爲false。若是設置爲true，那麼定義的錨連接，也就是anchors屬性則沒有效果*/
lockAnchors:false,ide

/*滾動到最頂部後是否連續滾動到底部，默認爲false*/
loopTop:false,函數

/*滾動到底部後是否連續滾動回頂部，默認爲false*/
loopBottom:false,oop

/*橫向slider幻燈片是否循環滾動，默認爲true*/
loopHorizontal:true,字體

/*是否使用插件的滾動方式，默認爲true，若是選擇false，則會出現瀏覽器自帶的滾動跳，將不會暗夜滾動，而是按照滾動條的默認行爲滾動*/
autoScrolling:true,

/*是否包含過冬天，默認爲false，若是設置爲true，則瀏覽器自帶的滾動條出現，頁面仍是按頁滾動，可是滾動條的默認行爲頁有效*/
scrollBar:false,

/*設置每個section頂部和底部的padding，默認都爲0。通常若是咱們須要在頂部或底部的設置菜單、導航、元素等，可使用這兩個配置項。*/
paddingTop:'0px',
paddingBottom:0,

/*固定的元素默認爲null、須要配置一個jquery選擇器。在頁面滾動的時候，fixedElements設置的元素固定不動*/
fixedElements:'#header',

/*是否可使用鍵盤方向鍵導航，默認爲true*/
keyboardScrolling:true,

/*在移動設備中滑動頁面的敏感性，默認爲5，是按百分比來衡量，最高爲100，越大則越難滑動。*/
touchSensitivity:5,

/*continuousVertical是否循環滾動，默認爲false。若是設置爲true，則頁面會循環滾動，而不像loopTop或loopBottom那樣出現跳動，注意這個屬性和loopTop/loopBottom不兼容，不要同時設置*/

/*錨連接是否能夠控制滾動動畫，默認爲true。若是爲false則沒有動畫效果*/
animateAnchor:true,

/*是否記錄歷史，默認爲true，能夠記錄頁面滾動的歷史，經過瀏覽器的前進後退控制導航。注意若是設置了autoScrolling:false ,那麼之歌配置也將被關閉，即設置爲false*/
recordHistory:true,

/*綁定彩蛋，設定的相關屬性與anchors的值相對應後，彩蛋能夠控制滾動，默認爲false。能夠設置爲菜單的jquery選擇器*/
menu:'#fullpageMenu',

/*是否顯示導航，默認爲false。若是設置爲true，會顯示小圓點，做爲導航*/
navigation:true,

/*導航小圓點位置，能夠設置爲left或者right*/
navigationPosition:'right',

/*navigationTooltips:導航小圓點的tooltips設置，默認爲[],注意按照順序設置*/
navigationTooltips:['page1','page2','page3','page4'],

/*是否顯示當前頁面的導航的tooltip信息，默認爲false*/
showActiveTooltip:true,

/*是否顯示橫向幻燈片的導航，默認爲false*/
slidesNavigation:false,

/*橫向幻燈片導航的位置，默認爲bottom，能夠設置爲top或bottom*/
slidesNavPosition:'bottom'

/*scrollOverflow：內容超過滿屏後是否顯示滾動條，默認爲false。若是設置爲true，則會顯示滾動條，若是要滾動查看內容，還須要jquery.slimscroll插件的配合。slimscroll插件主要用於模擬傳統的瀏覽器滾動條*/

/*sectionSelector：section的選擇器，默認爲.section*/

/*slideSelector：slide的選擇器，默認爲.slides*/
});
});
/*
方法：調用方法均爲 $.fn.fullpage.xxx()

1. moveSectionUp()/moveSectionDown()：向上或向下滾動一頁
2. moveTo(section，slides)：滾動到第幾頁，第幾個幻燈片，注意，頁面是從1開始，而幻燈片是從0開始。
3. silentMoveTo(section,slide)：和moveTo同樣，可是沒有動畫效果。
4. moveSlideRight()/moveSlideLeft()：幻燈片向右/左滾動
5. setAutoScrolling(boolean)：動態設置autoScrolling
6. setLockAnchors：動態設置lockAnchors
7. setRecordHistory(boolean)：動態設置recordHistory
8. setScrollingSpeed(milliseconds)：動態設置scrollingSpeed
9. setAllowScrolling(bollean,[directions])：添加或刪除鼠標滾輪/滑動控制，第一個參數true爲啓用，false
爲禁用，後面的參數爲方向，取值包含all,up,down,left,right,可使用多個，逗號分割
10. destroy(type)：銷燬fullpage特效，type能夠不寫，或者使用all，不寫type，fullpage給頁面添加的樣式和html元素還在，若是使用
all，則樣式、html等所有銷燬，頁面恢復和不使用fullpage相同的效果
11. reBeuild()：從新更新頁面和尺寸，用於通果ajax請求後改變了頁面結構以後，重建效果。

Lazy Loading
<img data-src='img.png'>
<video>
<source data-src='video.webm' type='video/webm'/>
<video>

回調
* afterLoad(anchorLink,index)
1. 滾動到某一section，且滾動結束後，會觸發一次此回調函數，函數接收anchorLink和index兩個參數，anchorLink時錨連接的名稱，index是序號，從1開始計算。
2. 咱們能夠根據anchorLink和index參數值的判斷，觸發相應的事件

* onLeave(index,nextIndex,direction)
1. 在咱們離開一個section時，會觸發一次此回調函數，接收index/nextIndex/和direction 3個參數
I. index是離開的頁面的序號，從1開始計算。
II. nextIndex是滾動的目標頁面的序號，從1開始計算
III. direction判斷往上滾動仍是往下滾動，值是up或down
2. 經過return false 能夠取消滾動

* afterRender()
頁面結構生成後的回調函數，或者說是頁面初始化完成後的回調函數

* afterResize()
瀏覽器窗口尺寸改變後的回調函數

* afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滾動到某一幻燈片後的回調函數，與afterLoad相似

* onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在咱們離開一個slide時，會觸發一次此回調函數，與onLeave相似

*/ </script></body></html>

相關標籤/搜索

fullpage

JavaScript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。