近期的网站改版, 需要采用全屏滑动的方式布局. 于是就使用了 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 就可以.// 底部高度自定义
来源: http://www.bubuko.com/infodetail-2816041.html