24

fullpage.js簡單教程（二）

 

作全屏滾動網頁，實現滾動效果後，首先想到的就是網頁右邊的導航欄，要實現這個導航欄，fullpage.js插件自己就自帶配置項，只要會使用就能夠實現效果了。

先介紹幾個api：

anchors：定義錨連接，默認值爲[]，有了錨連接，就能夠快速的打開定位到某一頁面，也是咱們實現導航欄的關鍵；

lockAnchors：是否鎖定錨連接，默認爲false，若是設定爲true，定義的錨連接，也就是anchors屬性就沒有效果了；

menu：綁定菜單，設定相關屬性與anchors的值相對應後，菜單能夠控制滾動，默認爲false；

navigation：是否顯示導航，默認爲false，若是設置爲true，會顯示小圓點，做爲導航；

navigationPostion：導航小圓點的位置，能夠設置爲left或right；

navigationTooltips：導航小圓點的tooltips的設置，默認爲[]，注意按照順序設置。

使用fullpage.js插件默認自帶的導航欄： 

 

 1 <script>
 2 　　$(function(){
 3 　　　　$('#gufeibai').fullpage({
 4 　　　　　　anchors : ['page1','page2','page3','page4']，
 5 　　　　　　navigation：true，
 6 　　　　　　navigationPostion：right，
 7 　　　　　　navigationTooltips：['page1','page2','page3','page4']  //設置它的提示
 8 　　　　});
 9 　　});
10 </script>

 

設置完成就能夠查看效果了，假若不想用fullpage.js默認的樣式效果，還能夠自定義樣式。

自定義導航欄：

基本結構：

 

 1 <div id="gufeibai">
 2 　　<div class="section">第一屏</div>
 3 　　<div class="section">第二屏</div>
 4 　　<div class="section">第三屏</div>
 5 </div>
 6 <ul id="fp-nav">
 7 　　<li data-menuanchors='page1'><a href="#page1">1</a></li>
 8 　　<li data-menuanchors='page2'><a href="#page2">2</a></li>
 9 　　<li data-menuanchors='page3'><a href="#page3">3</a></li>
10 </ul>

實現效果:

1 <script>
2 　　$(function(){
3 　　　　$('#gufeibai').fullpage({
4 　　　　　　anchors : ['page1','page2','page3','page4']，
5 　　　　　　menu : '#fp-nav'
6 　　　　});
7 　　});
8 </script>