JavaScript--fullPage.js外掛程式

標籤：

 

GitHub:https://github.com/alvarotrigo/fullPage.js

 FullPage.js是一個基於JQuery的外掛程式,可以很方便的製作出全屏網站; 一 特點:

1.支援滑鼠滾動;
2.支援鍵盤控制前進和後退;
3.多個回呼函數;
4.支援手機/平板觸摸事件;
5.支援CSS3動畫;
6.支援視窗縮放,縮放時自動調整;
7.jQuery相容1.7+;IE8+;

 

 二 引入檔案

1.引入FullPage.css

1 <link rel="stylesheet" href="css/jquery.fullpage.css">

2.引入jquery.js

1 <script src="js/jquery.min.js"></script>

3.引入easings.js增強動畫過渡效果,也可以使用完整的jQuery UI代替;

1 <script src="js/jquery.easings.min.js"></script>

4.引入FullPage.js

1 <script src="js/jquery.fullpage.js"></script>

 

三 HTML結構

 1 <!-- 每個section代表一屏,預設顯示第一屏;如果要指定載入頁面時顯示的螢幕,可在對應的section加上class="active" --> 2 <div id="wrapper"> 3     <div class="section">第一屏</div> 4     <div class="section">第二屏</div> 5     <div class="section">第三屏</div> 6 </div> 7  8 <!-- 可在section內加入slide; --> 9 <div class="section">10     <div class="slide">第一屏的第一屏</div>11     <div class="slide">第一屏的第二屏</div>12     <div class="slide">第一屏的第三屏</div>13 </div>

 

 四 JavaScript調用

1 <script>2     $(function(){3         $(‘#wrapper‘).fullpage();4     });5 </script>

 

五 配置

 1 $(document).ready(function() { 2     $(‘#fullpage‘).fullpage({ 3         //Navigation 4         menu: false,                            // 綁定菜單,設定的相關屬性與anchors的值對應後,菜單可以控制滾動; 5         anchors:[‘firstPage‘, ‘secondPage‘],    // 定義錨連結; 6         navigation: false,                      // 是否顯示項目導航; 7         navigationPosition: ‘right‘,            // 項目導航的位置; 8         navigationTooltips: [‘firstSlide‘, ‘secondSlide‘],  // 項目導航的tip; 9         showActiveTooltips: false,10         slidesNavigation: true,                 // 是否顯示左右滑動的項目導航;11         slidesNavPosition: ‘bottom‘,            // 左右滑動的項目導航的位置;12 13         //Scrolling14         css3: true,                             // 是否使用CSS3-transforms滾動;15         scrollingSpeed: 700,                    // 捲動速度;16         autoScrolling: true,                    // 是否使用外掛程式的滾動方式,選擇false會出現捲軸;17         fitToSection: true,                     18         scrollBar: false,19         easing: ‘easeInOutCubic‘,               // 滾動動畫方式;20         easingcss3: ‘ease‘,21         loopBottom: false,                      // 滾動到最底部是否滾回頂部;22         loopTop: false,                         // 滾動到最頂部是否滾回底部;23         loopHorizontal: true,                   // 左右滑塊是否迴圈;24         continuousVertical: false,              // 是否迴圈滾動;25         normalScrollElements: ‘#element1, .element2‘,26         scrollOverflow: false,                  // 內容超過滿屏後是否顯示捲軸;27         touchSensitivity: 15,28         normalScrollElementTouchThreshold: 5,29 30         //Accessibility31         keyboardScrolling: true,                // 是否使用鍵盤方向鍵導航;32         animateAnchor: true,                    // 錨點控制滾動;33         recordHistory: true,                    // 記錄曆史;34 35         //Design36         controlArrows: true,                    // 左右滑塊箭頭;37         verticalCentered: true,                 // 內容是否垂直置中;38         resize : false,                         // 字型是否隨視窗縮放而縮放;39         sectionsColor : [‘#ccc‘, ‘#fff‘],40         paddingTop: ‘3em‘,                      // 與頂部距離;41         paddingBottom: ‘10px‘,42         fixedElements: ‘#header, .footer‘,      // 定位某個元素;43         responsive: 0,44 45         //Custom selectors46         sectionSelector: ‘.section‘,47         slideSelector: ‘.slide‘,48 49         //events50         onLeave: function(index, nextIndex, direction){},   // 滾動前的回呼函數;51         afterLoad: function(anchorLink, index){},           // 滾動到某一屏後的回呼函數;52         afterRender: function(){},                          // 頁面結構產生後的回呼函數;53         afterResize: function(){},54         afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, // 滾動到某一水平滑塊後的回呼函數;55         onSlideLeave: function(anchorLink, index, slideIndex, direction){}      // 某一水平滑塊滾動前的回呼函數;56     });57 });

 

JavaScript--fullPage.js外掛程式