fullpage.js使用指南

Posted 2021-01-14 不要再抱怨了，抱我吧！

近期的网站改版，需要采用全屏滑动的方式布局。于是就使用了fullpage插件。

因为fullpage是基于jquery，所以需要首先引入jquery，然后再引入fullpage.js。

$(‘#fullpage‘).fullpage({//调用fullpage元素 使用其方法设置参数

　menu: ‘#menu‘, //网站导航菜单

   anchors：[‘page1‘, ‘page2‘, ‘page3‘],//为每屏板块命名的锚链接

   navigation: true,//是否显示导航按钮

   scrollingSpeed:900,//屏幕滚动花费的时间 毫秒

   fixedElements:‘.header‘,//固定class为header的元素  这里为栏目菜单

   afterLoad：function(anchorLink,index){ //进入当前板块的函数        anchorLink为锚链接   index为索引值 从1开始

       if(index==1){

           $(‘#fp-nav ul li a span,.fp-slidesNav ul li a span‘).css(‘background-color‘,‘#fff‘);//把导航按钮背景色改成白色

        }

   },

  onLeave:function(index,nextIndex,direction){//滚动前的函数   //index为索引值  nextIndex为将要滑到到板块的索引值  direction 判断是往上滚动还是往下 值是up或down

      if(nextIndex==4){  //如果要滑到第四屏板块   

　      $(‘.Service-wrap‘).addClass(‘animated‘);//为class为service-wrap的元素 添加class animated
　   }else{
　　   $(‘.Service-wrap‘).removeClass(‘animated‘);

       }

 

})

html结构方面需要注意的是：如果底部不需要完整的一屏显示  添加class fp-auto-height 就可以。//底部高度自定义