fullpage插件的使用

fallpage插件可以从github
https://github.com/alvarotrigo/fullPage.js
或者
http://www.dowebok.com/demo/2014/77/
网站下载插件
将相应的js与css文件引入页面

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
//因为fullpage是jQuery插件所以要引入<script src="js/jquery.min.js"></script>

<!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->
<script src="js/jquery.easings.min.js"></script>

<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>

<script src="js/jquery.fullPage.js"></script>

必须引入的:

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>//必须在上
<script src="js/jquery.fullPage.js"></script>

复制想要的html结构
例如:

<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

还有style

<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>

再调用js

<script>
$(function(){
	$('#dowebok').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
		//每一屏的颜色
	});
});
</script>

除了颜色之外还有许多选项

verticalCentered			默认值是true			内容是否垂直居中
navigation					默认值是true			是否显示导航栏

还有一些回调函数:

afterLoad:function(anchorLink(锚链接名称),index(从一开始计算)){
			当屏幕滚动到某一屏的时候调用
}