1. 程式人生 > >fullpage.js與fullpage詳解

fullpage.js與fullpage詳解

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>
 
         新增css
.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}.section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}