整屏滾動效果 jquery.funnPage.js外掛程式+CSS3實現

標籤：des   style   blog   http   io   ar   color   os   使用   

最近很流行整屏滾動的效果，無論是在PC端還是移動端，本人也藉機學習了一下，主要通過jquery.funnPage.js外掛程式+CSS3實現效果。

本人做的效果：

首先使用要引入外掛程式

<link rel="stylesheet" href="../c/jquery.fullPage.css" media="all"/><script type="text/javascript" src="../j/lib/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../j/lib/jquery.easings.min.js"></script><script type="text/javascript" src="../j/lib/jquery.fullPage.js"></script>

HTML代碼

<div id="fullpage">    <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>

JavaScript

$(function(){    $(‘#fullpage‘).fullpage();});

 通過JS可對外掛程式常見參數進行配置，如：

//定義錨連結
anchors: [‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘],
// 是否顯示項目導航
navigation: true,
navigationTooltips: [‘首頁‘, ‘二‘, ‘三‘, ‘四‘],
navigationColor: ‘#000‘,
navigationPosition: ‘left‘,
// 滾動到最底部後是否滾回頂部
loopBottom: true,
// 每一屏底色
sectionsColor: [‘#f2f2f2‘, ‘#4BBFC3‘, ‘#7BAABE‘, ‘#EAE1C0‘],
// 是否顯示左右滑塊的項目導航
slidesNavigation: true,
// 左右滑塊的箭頭的背景顏色
controlArrowColor: ‘yellow‘,
// 左右滑塊是否迴圈滑動
loopHorizontal: false,
// 離開某一屏的回呼函數
onLeave: function(index, nextIndex, direction){
}

值得說明一下的是 menu: true只有在HTML定義了以下內容的時候才會起效果。

<ul id="myMenu" style="position:fixed;top:100px;">    <li data-menuanchor="firstPage" class="active"><a href="#page1">First section</a></li>    <li data-menuanchor="secondPage"><a href="#page2">Second section</a></li>    <li data-menuanchor="thirdPage"><a href="#page3">Third section</a></li>    <li data-menuanchor="fourthPage"><a href="#page4">Fourth section</a></li></ul>

 可見即可通過JS配置導航，也可先寫好導航再倒入到外掛程式中

詳細參考資料：

官網：https://github.com/alvarotrigo/fullPage.js

中文版：http://www.dowebok.com/77.html

使用參考網站：

http://www.douyutv.com/cms/about/jobs.html#page5

http://www.dowebok.com/demo/2014/97/

整屏滾動效果 jquery.funnPage.js外掛程式+CSS3實現