jQuery fullpage plugin
fullPage.js是一個基于jQuery的插件，它能夠很方便、很輕松的制作出全屏網站，主要功能有：
（1）支持鼠標滾動；
（2）支持手機、平板觸摸事件；
（3）多個回調函數(shù)；
（4）支持CSS動畫；
（5）支持窗口縮放；
（6）窗口縮放時自動調整；
（7）可設置滾動寬度、背景顏色、滾動速度、循環(huán)選項、回調、文本對齊方式等。
除了IE6、7之外，幾乎兼容所有的主流瀏覽器，fullpage是基于MIT協(xié)議的。
一、搭建fullPage.js的開發(fā)環(huán)境
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>Fullpage簡單例子</title>
<link rel="stylesheet" />
</head>
<body>
//開始制作全屏網站
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
</body>
</html>
二、基本的頁面結構
<div id="fullpage">
<div class="section">內容</div>
<div class="section">內容</div>
<div class="section">內容</div>
<div class="section">內容</div>
</div>
三、給某一個section（頁）增加slide（幻燈片）
<div class="section">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
</div>
四、激活fullpage效果
<script>
$(document).ready(function(){
$('#fullpage').fullpage();
});
</script>
五、小實例（制作一個全屏網頁）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>Fullpage簡單例子</title>
<link rel="stylesheet" />
<style type="text/css">
body{
color:#fff;/*文字為白色*/
}
.section1{
background-color: green;
}
.section2{
background-color: orange;
}
.section3{
background-color: gray;
}
.section4{
background-color: red;
}
.slide{
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
//開始制作
<div id="fullpage">
<div class="section section1"><h1>這是第一屏</h1></div>
<div class="section section2">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
<div class="slide">slide5</div>
<div class="slide">slide6</div>
</div>
<div class="section section3"><h1>這是第三屏</h1></div>
<div class="section section4"><h1>這是第四屏</h1></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<!--激活fullpage效果-->
<script>
$(document).ready(function(){
$('#fullpage').fullpage();
});
</script>
</body>
</html>
