學習 | jQuery全屏滾動插件FullPage.js
阿新 • • 發佈：2018-03-04
arrow viewport ice char IT loop 網站 動畫 信息
簡介
fullPage.js是一個基於jQuery的全屏滾動插件，它能夠很方便、很輕松的制作出全屏網站。
主要功能
- 支持鼠標滾動
- 支持前進後退和鍵盤控制
- 多個回調函數
- 支持手機、平板觸摸事件
- 支持 CSS3 動畫
- 支持窗口縮放
- 窗口縮放時自動調整
- 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式
兼容性
fullPage.js 支持 IE8+ 及其他現代瀏覽器。測試代碼
測試代碼
<!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.css"> <style> #myMenu{ width: 900px; display: block; position: fixed; top: 20px; z-index: 999; } #myMenu li{ float: left; list-style: none; margin-left: 20px; text-align: center; } #myMenu a { font-size: 24px; color: red; } #fullpage .section{ font-size: 24px; color: red; } .section:nth-child(3) div{ width: 200px; margin:0 auto; } .btn{ position: fixed; top: 100px; z-index: 999; } </style> </head> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="./jquery-ui.min.js"></script> <script src="./jquery.fullPage.js"></script> <script> $(document).ready(function(){ $(‘#fullpage‘).fullpage({ // 決定是否使用控制箭頭向左向右移動幻燈片 controlArrows:true, // 是否垂直居中網頁中的內容 verticalCentered:true, // 是否在窗口改變大小後，自動調整網頁中字體的大小 resize:true, // 每個屏幕滾動動畫執行的時間 scrollingSpeed:700, // 確定是否使用JavaScript和CSS3轉換滾動在切片和幻燈片，如果為true則css3無效 css3:true, // 定義在滾動屏幕中使用css3:true設置的過度效果，比如賽貝爾曲線 easingcss3:‘ease‘, // 定義每個section的CSS背景演示 sectionsColor: [‘#254875‘, ‘#00FF00‘, ‘#254587‘, ‘#695684‘], // 定義導航的錨文本信息例如（#page1) anchors: [‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘], // 確定是否在URL中的錨點將在插件有任何影響 lockAnchors:false, // 定義了用於垂直和水平滾動的過渡效果 easing:‘easeInOutCubic‘, // 定義屏幕滾動到第一個後，是否循序滾動到最後一個 loopTop:false, // 定義屏幕滾動到最後一個後，是否循環滾動到第一個。 loopBottom:false, // 定義水平的幻燈片是否循環切換 loopHorizontal:true, // 義屏幕是否自動滾動，還是需要用戶觸發事件滾動 autoScrolling:true, // 設置是否自適應整個窗口的空間,當為true時section將填充到整個頁面，否者用戶可以停留在網頁的任何位置。 fitToSection:true, // 定義是否使用瀏覽器默認的滾動條 scrollBar:false, // 定義是否使用瀏覽器默認的滾動條 paddingTop:‘10px‘, // 顯示一個小圓圈組成的快速導航欄 navigation: true, // 結合參數navigation一起使用，用於設置navigation定義的菜單顯示的位置，可以設置為left/right。 navigationPosition: ‘right‘, // 鼠標移動到快速導航上面的提示文本 navigationTooltips: [‘fullPage.js‘, ‘Powerful‘, ‘Amazing‘, ‘Simple‘], menu:‘#myMenu‘, // 回調函數 // 1.滾動到某一屏後 afterLoad:function(link,index){ var currentSection =$(this); if(index===3){ console.log(currentSection); console.log(‘is 3 section‘); } if(link===‘page2‘){ console.log(‘is 2 section‘) } }, // 滾動前 // index 是離開的“頁面”的序號，從1開始計算； // nextIndex 是滾動到的“頁面”的序號，從1開始計算； // direction 判斷往上滾動還是往下滾動，值是 up 或 down。 onLeave:function(index,nextIndex,direction){ var currentSection = $(this); // 離開第二個到了第三個 if(index==2){ console.log(currentSection); console.log(nextIndex); console.log(direction); console.log(‘到了第三個,上一個是第二個‘); } if(nextIndex==3){ // return false 取消自動滾動 console.log(1111); return false; } // 不常用的 // afterRender() // 頁面結構生成後的回調函數，或者說是頁面初始化完成後的回調函數 // afterResize() // 瀏覽器窗口尺寸改變後的回調函數 // afterSlideLoad(anchorLink,index,slideAnchor,slideIndex) // 滾動到某一幻燈片後的回調函數，與afterLoad類似 // onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex) // 在我們離開一個slide時，會觸發一次此回調函數，與onLeave類似 } }) // 方法函數 $(‘.btn‘).bind(‘click‘,function(){ // 設置section向上滾動 $.fn.fullpage.moveSectionUp(); // 設置section向下滾動 // $.fn.fullpage.moveSectionDown(); // 指定section index從0開始 // $.fn.fullpage.moveTo(3); // 定義每個section/slide滾動的時間 // $.fn.fullpage.setScrollingSpeed(700); // 設置幻燈片向右滑動 // $.fn.fullpage.moveSlideRight(); // 設置幻燈片向左滑動 // $.fn.fullpage.moveSlideLeft(); }) }) </script> <body> <ul id="myMenu"> <li data-menuanchor="page1" class="active"><a href="#page1">First section</a></li> <li data-menuanchor="page2"><a href="#page2">Second section</a></li> <li data-menuanchor="page3"><a href="#page3">Third section</a></li> <li data-menuanchor="page4"><a href="#page4">Fourth section</a></li> </ul> <input type="button" style="color:#000;font-size:24px;" value=點擊 class="btn"> <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> </body> </html>
學習 | jQuery全屏滾動插件FullPage.js