首頁 > web前端 > js教程 > 全螢幕滾動插件fullPage.js使用實例解析

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

高洛峰
發布: 2017-01-11 09:33:09
原創
1379 人瀏覽過

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

主要功能有:

支援滑鼠滾動

支援前進後退和鍵盤控制

多個會調函數

支援手機、平板觸控事件

支援CSS3動畫縮放調整

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

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

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

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

1

2

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>

登入後複製
全螢幕滾動插件fullPage.js使用實例解析   1

   

CSS佈局

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<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對頁面進行參數配置可調用,這裡我沒呼叫)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<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中文網!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板