fullPage.js和fullPage都能實現全屏滾動，二者區別是：fullPage.js需依賴於JQuery庫，而fullPage不需要依賴任何一個js庫，可以單獨使用。

一、fullPage.js實現全屏

1、基本演示

1.1  引入檔案

<!-- 引入css --><linkrel="stylesheet"type="text/css"href="http://www.ido321.com/fullPage.js-master/jquery.fullPage.css"/><!-- fullpage.js依賴於jquery庫 --><scripttype
 
="text/javascript"src="http://www.ido321.com/jquery.js"></script><scripttype="text/javascript"src="http://www.ido321.com/fullPage.js-master/jquery.fullPage.min.js"></script>

1.2  css：引入的css並不是給元素設定樣式的，元素的樣式需要自己寫

<styletype="text/css">        body
        {
            color:#FFFFFF;}
 
.section1
        {
            background-color:#BFDA00;}.section2
        {
            background-color:#2EBE21;}.section3
        {
            background-color:#2C3E50;}.section4
        {
            background-color:#FF9900;}</style>

1.3  html：每一個section程式碼一屏，預設從第一屏顯示，若需要自定義從某屏開始顯示，為section新增active類。示例預設從第三屏顯示

<divid="ido"><divclass="section section1"><h1>每一個section是一屏，這是第一屏</h3></div><divclass="section section2"><h1>每一個section是一屏，這是第二屏</h3></div><divclass="section section3 active"><h1>每一個section是一屏，這是第三屏</h3></div><divclass="section section4"><h1>每一個section是一屏，這是第四屏</h3></div></div>

1.4  js:

<scripttype="text/javascript">
    $(function(){
        $("#ido").fullpage();});</script>

1.5  可以在某屏中再新增子滾動屏，藉助slide類。修改上述第二個section如下：

<divclass="section section2"style="text-align:center"><h1class="slide">第二屏的第一屏</h1><h1class="slide">第二屏的第二屏</h1><h1class="slide">第二屏的第三屏</h1><h1class="slide">第二屏的第四屏</h1></div>

1.6  新增背景屏，在html新增兩個section

<divclass="section section5"><h1>每一個section是一屏，這是第5屏--圖片背景</h3></div><divclass="section section6"><h1>每一個section是一屏，這是第6屏--圖片背景</h3></div>

.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}.section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}