关于fullPage.js使用方法

前言：先说说废话哈 ，现在很多的网站用那种大的图片做背景什么的看起来及其舒服，可以用鼠标滚动条，然后就可以一层一层的往下面翻阅板块，并且带有过度的动画，如果有导航可以点击导航到相应的板块，一开始我是用a标签的描点写的导航以及对应的相应板块，对于初学着的我也没想到什么高大上的方法了，但是用a标签那只是一下子就到对应的板块去了 完全没有过度的样子，这样自己看起都是不太舒服了。虽然用js可以弄但是有点麻烦啊，所以我找到了fullPage.js方法。接下来我们说说fullPage.js吧！

一、下载fullPage.js

1. https://github.com/alvarotrigo/fullPage.js

2.先引入fullPage.js，由于fullPage.js是开源的jQuery的所以也需要引入jQuery

引入的css
<link rel="stylesheet" href="jquery.fullPage.css" />
fullPage.js依赖jQuery库
<script src="../js/jquery-1.11.1.js"></script>
<script src="jquery.fullPage.min.js"></script>

3.引入的css他也就是个库不是给我们设置css,简单来说就像bootstrap的库 用class类这样使用。
4.html代码：section是一个代码一屏，默认代码是从第一屏开始的如果要定义从第几屏开始的话的话就加active，这样就是从第二屏开始了。

css:

	<style>
			#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;
			}
			
			.section {
				text-align: center;
				font: 50px "Microsoft Yahei";
				color: #fff;
				background: red;
			}
	</style>

/*加导航的可点击*/
<ul id="menu">
	<li data-menuanchor="page1" class="active">
		<a href="#page1">第一屏</a>
	</li>
	<li data-menuanchor="page2">
		<a href="#page2">第二屏</a>
	</li>
	<li data-menuanchor="page3">
		<a href="#page3">第三屏</a>
	</li>
	<li data-menuanchor="page4">
		<a href="#page4">第四屏</a>
	</li>
</ul>
/*鼠标滚动换/*
<div id="dowebok">
	<div class="section">
		<h3>第一屏</h3>
		<p>fullPage.js — 绑定菜单演示</p>
	</div>
	<div class="section active">
		<h3>第二屏</h3>
		<p>请查看左上角，点击可以控制</p>
	</div>
	<div class="section">
		<h3>第三屏</h3>
		<p>绑定的菜单没有默认的样式，你需要自行编写</p>
	</div>
	<div class="section">
		<h3>第四屏</h3>
		<p>这是最后一屏</p>
	</div>
</div>

5.js

$(function(){
	$('#dowebok').fullpage({
	//sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
	//设置颜色参数
	anchors: ['page1', 'page2', 'page3', 'page4'],
	//定义锚链接
	menu: '#menu'
	//绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
	});
});

这里就不展示效果了，可以复制代码去看看效果！
配置图：

如果哪里不对希望指出来哈。
原文地址：https://github.com/dwqs/blog