fullpage.js简单教程

Posted 2020-09-22 顾非白

做全屏滚动网页，实现滚动效果后，首先想到的就是网页右边的导航栏，要实现这个导航栏，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>