阅读更多
【前言】
经常看到一些全屏网站，看着就很高端大气上档次
现在很多的网站用那种大的图片做背景什么的看起来效果很棒，可以用鼠标滚动条，然后就可以一层一层的往下面翻阅板块，并且带有过渡的动画，如果有导航可以点击导航到相应的板块。传统方法是用a标签的描点写的导航以及对应的相应板块，对于初学者一般也没什么高大上的方法，但是用a标签那只是一下子就到对应的板块去，完全没有过渡的样子，这样看起不太舒服。虽然用js可以弄但是有点麻烦，所以找到了fullPage.js方法。
想实际操作的话，可以试着使用fullpage.js或 Scrollify 等基于jquery的插件，轻量又很方便
【兼容】
jquery支持jquery 1.7+，浏览器支持IE8+及其他主流浏览器
【对比】
对比Scrollify 和 fullPage.js：
Scrollify 和 fullPage.js 一样，Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比，Scrollify 更加小巧，压缩后不足 4KB。但功能上不如 fullPage.js 强大，对移动设备的支持也不如 fullPage.js。不过对于一般的情况，Scrollify 是完全可以胜任的，它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动
【下载】
fullPage.js是开源的JQuery插件库，其Github地址：https://github.com/alvarotrigo/fullPage.js
【功能】
①支持鼠标滚动
②支持前进后退和键盘控制
③多个回调函数
④支持手机、平板触摸事件
⑤支持 CSS3 动画
⑥支持窗口缩放
⑦窗口缩放时自动调整
⑧可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
【用法详解】
（1）文件引入
①引入css（注意： 引入的css并非给元素设置样式的，元素的样式须要自己写）
引入的css也就是个库，不是给我们设置css。简单来说就像bootstrap的库用class类这样使用
②引入fullPage.js之前，由于fullPage.js是开源的jQuery的所以需要先引入jQuery库
③引入脚本文件
（2）建立页面结构
分析：
①每一个section都是一个页面，包裹住所有的页面的容器不能是body，可以任意命名一个id包裹住所有的section；
②section是一个代码一屏，默认代码是从第一屏开始的。如果要定义从第几屏开始的话的话就加active，这样就是从那个屏开始了；
③样式设置：两种方法CSS设置或者JS动态设置
1. 引入的css并非给元素设置样式的，元素的样式须要自己写，例如
2. JS动态设置（还有许多其他配置项，比如给多个页面填充不同的背景颜色）
激活fullPage效果
$(document).ready(function(){
$('#main_body').fullpage({
sectionsColor: ['red', 'blue', 'yellow', 'green','purple']
}); //激活fullpage的效果，可以检查页面看效果了
})
（3）子滚动屏
如果要在某屏中再加入子滚动屏，需要借助slide类，改动上述第二个section例如以下：
第二屏的第一屏
第二屏的第二屏
第二屏的第三屏
第二屏的第四屏
（4）背景屏，CSS设置即可
.section1 { background: url(image/1.jpg) no-repeat 100%;}
.section2 { background: url(image/2.jpg) no-repeat 100%;}
（5）循环演示
①返回跳跃性循环
loopTop:true, /* 顶部循环滚动是跳往底部的页面*/
loopBottom:true, /* 底部循环滚动，同样是跳往页面*/
loopHorizontal:false, /* 幻灯片循环滚动*/
②无间隙循环
continuousVertical:true,
区别： 第一种在页面滑动到最后一页时，在进行滑动的时候，会跳回第一页，是跳跃的，而第二种在页面滑动到最后一页的时候再次滑动会滑回第一页。注意，两种循环方式不能兼而有之 （实际上两种循环方式都使用的话，会显示第一种）
（6）导航栏
做全屏滚动网页，实现滚动效果后，首先想到的就是网页右边的导航栏，要实现这个导航栏，fullpage.js插件本身就自带配置项，只要会使用就可以实现效果了
先介绍几个api：
①anchors：定义锚链接，默认值为[]，有了锚链接，就可以快速的打开定位到某一页面，也是我们实现导航栏的关键；
②lockAnchors：是否锁定锚链接，默认为false，如果设定为true，定义的锚链接，也就是anchors属性就没有效果了；
③menu：绑定菜单，设定相关属性与anchors的值相对应后，菜单可以控制滚动，默认为false；
④navigation：是否显示导航，默认为false，如果设置为true，会显示小圆点，作为导航；
⑤navigationPostion：导航小圆点的位置，可以设置为left或right；
⑥navigationTooltips：导航小圆点的tooltips的提示，默认为[]，注意按照顺序设置
【使用fullpage.js插件默认自带的导航栏： 】
【自定义导航栏】
倘若不想用fullpage.js默认的样式效果，还可以自定义样式
HTML：
CSS：
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px;
list-style-type: none; z-index: 70;}
#menu li { float: left; margin: 0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333;
text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
$(function() {
$("#ido").fullpage({
continuousVertical: true, //循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
});
});
【自定义Section高度 】
网上很多用户说无法自定义底部Footer的高度，我也查阅了很多资料，都没有发现方法，但是无意间看到一个Fullpage的示例，实现自定义底部高度的方法，而且是不算在滑动的Section里面，在需要自定义高度的DIV里面，只需要给Section添加.fp-auto-height类就可以实现自定义高度。
【拓展】
（1）随意的改变其中一屏的高度
如果设计别处心裁，最后一屏幕内容装不下，再添加一屏又多余，就是怎么能随意的改变其中一屏的高度，其实很简单，只需要在fullpage方法中添加一个参数：scrollOverflow: true即可。当然不要忘记引入一个
这样就不用担心内容超出一屏的内容无法显示了。可以在任意一屏随意的溢出并能准确衔接下一屏幕的内容了
（2）内容溢出scrollOverflow:true设置失效问题
可能原因：（1）js版本不同导致的（2）scrollOverflow单词拼写错误
（3）自定义的导航菜单active添加不上，激活状态失效
原因：（1）单词拼写错误data-menuanchor写成了data-menuanchors，多了个s
（4）js版本不一样的问题
当jquery.fullpage.css和jquery.fullpage.js和scrolloverflow.min.js这三个版本一致的时候，我试了几个jq版本也没有出现问题，所以，版本要相同指的是jquery.fullpage.css ，scrolloverflow.min.js， jquery.fullpage.js这几个js相同
（5）最后附上部分API
//配置背景颜色
sectionsColor:['red','#f04','#9b0','#d3f'],
//配置幻灯片切换是否显示箭头，默认true
controlArrows:false,
//配置每页内容页面是否垂直居中，默认false
verticalCentered:true,
//配置文字是否随着窗口变化而变化，默认false
resize:true,
//配置页面滚动速度,默认700
scrollingSpeed:1000,
//配置锚链接，不应该和autoScrolling，scrollBar一起使用
anchors:['page1','page2','page3','page4'],
//配置锚点切换时候是否有过度动画，默认true
animateAnchor:false,
//锁定配置的锚链接是否显示，默认false
lokAnchors:true,
//配置动画由css3还是jquery来执行，默认true
css3:true,
//配置滚动到顶部之后是否从底部循环滚动，默认false
loopTop:true,
//相反从底部循环滚动，默认false
loopBottom:true,
//设置页面是否循环滚动与loopTop，loopBottom不兼容,默认是false
continuousVertical:true,
//幻灯片是否循环滚动，默认true
loopHorizontal:false,
//配置是否按照插件的方式来进行滚动，默认true,和锚点不应该一起使用，
一般不设置或者保持默认
autoScrolling:true,
//滚动的时候是否包含滚动条,默认false,和锚点不应该一起使用，一般不设
置或者保持默认
scrollBar:false,
//配置页面上下间距，默认0，如果需要设置固定顶部和顶部菜单导航配合使用
// paddingTop：'300px',
paddingBottom:0,
//配置页面是否有固定的DOM
fixedElements:'#header',
//配置是否支持键盘方向键控制页面切换，默认true
keyboardScrolling:true,
//配置是否激活浏览器前进后退功能，如果页面设置了不按照插件的方式来滚动
该配置也失效，默认true
recordHistory:true,
//配置菜单
menu:'#fullpageMenu',
//配置导航,位置，提示,显示当前位置
navigation:true,
navigation:'right',
navigationTooltips:['page1','page2','page3','page4'],
showActiveTooltip:true,
//配置幻灯片是否显示导航,和位置
slidesNavigation:true,
slidesNavPosition:'bottom',
//配置内容超过容器是否显示滚动条，模式true,
scrollOverflow:true,
//修改section和幻灯片默认CLASS
sctionSelector:
slideSelector:
