jQuery fullpage plugin
fullPage.js是一個(gè)基于jQuery的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站，主要功能有：
（1）支持鼠標(biāo)滾動(dòng)；
（2）支持手機(jī)、平板觸摸事件；
（3）多個(gè)回調(diào)函數(shù)；
（4）支持CSS動(dòng)畫；
（5）支持窗口縮放；
（6）窗口縮放時(shí)自動(dòng)調(diào)整；
（7）可設(shè)置滾動(dòng)寬度、背景顏色、滾動(dòng)速度、循環(huán)選項(xiàng)、回調(diào)、文本對(duì)齊方式等。
除了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簡(jiǎn)單例子</title>
<link rel="stylesheet" />
</head>
<body>
//開始制作全屏網(wǎng)站
<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>
二、基本的頁(yè)面結(jié)構(gòu)
<div id="fullpage">
<div class="section">內(nèi)容</div>
<div class="section">內(nèi)容</div>
<div class="section">內(nèi)容</div>
<div class="section">內(nèi)容</div>
</div>
三、給某一個(gè)section（頁(yè)）增加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>
五、小實(shí)例（制作一個(gè)全屏網(wǎng)頁(yè)）
<!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簡(jiǎn)單例子</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>
