fullpage.js簡單教程（二）

標籤：控制   位置   soft   function   ref   script   使用   page   api   

做全屏滾動網頁，實現滾動效果後，首先想到的就是網頁右邊的導覽列，要實現這個導覽列，fullpage.js外掛程式本身就內建配置項，只要會使用就可以實現效果了。

先介紹幾個api：

anchors：定義錨連結，預設值為[]，有了錨連結，就可以快速的開啟定位到某一頁面，也是我們實現導覽列的關鍵；

lockAnchors：是否鎖定錨連結，預設為false，如果設定為true，定義的錨連結，也就是anchors屬性就沒有效果了；

menu：綁定菜單，設定相關屬性與anchors的值相對應後，菜單可以控制滾動，預設為false；

navigation：是否顯示導航，預設為false，如果設定為true，會顯示小圓點，作為導航；

navigationPostion：導航小圓點的位置，可以設定為left或right；

navigationTooltips：導航小圓點的tooltips的設定，預設為[]，注意按照順序設定。

使用fullpage.js外掛程式預設內建的導覽列：

<script>

　　$(function(){

　　　　$(‘#gufeibai‘).fullpage({

　　　　　　anchors : [‘page1‘,‘page2‘,‘page3‘,‘page4‘]，

　　　　　　navigation：true，

　　　　　　navigationPostion：right，

　　　　　　navigationTooltips：[‘page1‘,‘page2‘,‘page3‘,‘page4‘]  //設定它的提示

　　　　});

　　});

</script>

設定完成就可以查看效果了，倘若不想用fullpage.js預設的樣式效果，還可以自訂樣式。

自訂導覽列：

基本結構：

<div id="gufeibai">

　　<div class="section">第一屏</div>

　　<div class="section">第二屏</div>

　　<div class="section">第三屏</div>

</div>

<ul id="fp-nav">

　　<li data-menuanchors=‘page1‘><a href="#page1">1</a></li>

　　<li data-menuanchors=‘page2‘><a href="#page2">2</a></li>

　　<li data-menuanchors=‘page3‘><a href="#page3">3</a></li>

</ul>

實現效果：

<script>

　　$(function(){

　　　　$(‘#gufeibai‘).fullpage({

　　　　　　anchors : [‘page1‘,‘page2‘,‘page3‘,‘page4‘]，

　　　　　　menu : ‘#fp-nav‘

　　　　});

　　});

</script>

 

fullpage.js簡單教程（二）