全屏滾動-fullPage

全屏網站看起來很爽的樣子 先看iPhone的網站體驗一哈，高端大氣上檔次 今天使用jQuery插件fullPage.js來實現全屏滾動的效果 #####主要功能

• 支持鼠標滾動
• 支持先後進退和鍵盤控制
• 多個回調函數
• 支持手機，平板觸摸事件
• 支持CSS3動畫
• 支持窗口縮放
• 窗口縮放時自動調整
• 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

使用方法

1.引入文件

• 方式一 1.經過Bower下載： bower install fullpage --save 2.引入

<link rel="stylesheet" type="text/css" href="/bower_components/fullpage/jquery.fullPage.css" />

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>

<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="/bower_components/fullpage/jquery.fullPage.js"></script>

複製代碼

• 方式二 經過CDN引入fullPage.js

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.css" />

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/jquery.easings.min.js"></script>

<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/vendors/scrolloverflow.min.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/fullPage.js/2.9.3/jquery.fullpage.min.js"></script>
複製代碼

2.html文件結構

<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>
複製代碼

在每一屏中還能夠包含能夠在水平方向上滾動切換的slide。

<div id="full-page">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>
複製代碼

3.js文件內容

<script>
        $(function(){
            $('#dowebok').fullpage();
            // 調用此方法進行初始化
        });
    </script>    
複製代碼

這樣子就能夠實現啦。 實現文件地址