全螢幕滾動插件fullPage.js使用實例解析

如今我們經常能看到全螢幕網站，尤其是國外玩站。這些網站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內容，顯得格外的高端大氣上檔次。而JQuery的一款插件fullpage.js，可以實現全螢幕滾動，非常流行的效果，相容性IE8+相容性不錯，能夠相容於多種瀏覽器。

主要功能有：

支援滑鼠滾動

支援前進後退和鍵盤控制

多個會調函數

支援手機、平板觸控事件

支援CSS3動畫縮放調整

可設定滾動寬度、背景顏色、滾動速度、循環選項、回調、文字對齊方式等等

準備工作(下載jquery.fullPage.js和jquery.fullPage.css插件)

網址：插件下載地址(https://github.com/alvarotrigo/fullPage.js)

程式碼的外聯式引用(包括jquery-2.1.0.js)共3個

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.fullPage.js" type="text/javascript" charset="utf-8"></script>

   1

   

CSS佈局

<ul id="fullpageMenu"><!--ul导航栏按钮data-menuanchor为加载的页面page-->
      <li data-menuanchor = "page1" class="active"><a href="#page1">section1</a></li>
      <li data-menuanchor = "page2"><a href="#page2">section2</a></li>
      <li data-menuanchor = "page3"><a href="#page3">section3</a></li>
      <li data-menuanchor = "page4"><a href="#page4">section4</a></li>
    </ul>
    <div id="fullpage"><!--div为容器，这里要用id名为fullpage-->
      <div class="section"><!--默认的上下滚动页面，类名可改sectionSelector:".section"，不改默认类名要为section-->
        <h1>这是第一屏</h1>
      </div>
      <div class="section">
        <div class="slide">幻灯片1</div><!--默认的左右滚动幻灯片，类名可改slideSelector:".slide"，不改默认类名要为slide-->
        <div class="slide">幻灯片2</div>
        <div class="slide">幻灯片3</div>
        <div class="slide">幻灯片4</div>
      </div>
      <div class="section">
        <h1>这是第三屏</h1>
      </div>
      <div class="section">
        <h1>这是第四屏</h1>
      </div>
    </div>

   

jQuery腳本(主要用fullPage.js對頁面進行參數配置可調用，這裡我沒呼叫)

<style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
      .slide{
        font-size: 60px;
        text-align: center;
      }
      #fullpageMenu{
        font-size: 30px;
        position: fixed;
        top: 0;
        z-index: 1;
        list-style: none;
      }
      #fullpageMenu li a{
        text-decoration: none;
      }
      #fullpageMenu li{
        background-color: mediumaquamarine;
        border: 1px solid black;
        padding: 8px;
        cursor: pointer;
        text-align: center;
      }
      #fullpageMenu li:hover{
        background-color: orange;
      }
    </style>

示範效果：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

更多全螢幕滾動插件fullPage.js使用實例解析相關文章請關注PHP中文網！