码迷,mamicode.com
首页 > Web开发 > 详细

fullpage.js使用指南

时间:2018-10-21 16:03:18      阅读:471      评论:0      收藏:0      [点我收藏+]

标签:==   nim   navig   按钮   ul li   query   bsp   anim   height   

近期的网站改版,需要采用全屏滑动的方式布局。于是就使用了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 就可以。//底部高度自定义

fullpage.js使用指南

标签:==   nim   navig   按钮   ul li   query   bsp   anim   height   

原文地址:https://www.cnblogs.com/xts6/p/9825101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!