?

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 //Scrolling 14 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 //Accessibility 31 keyboardScrolling: true, // 是否使用鍵盤方向鍵導航; 32 animateAnchor: true, // 錨點控制滾動; 33 recordHistory: true, // 記錄歷史; 34 35 //Design 36 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 selectors 46 sectionSelector: '.section', 47 slideSelector: '.slide', 48 49 //events 50 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 });

?

轉載于:https://www.cnblogs.com/yizihan/p/4560787.html

總結

以上是生活随笔為你收集整理的JavaScript--fullPage.js插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。