fullpage外掛的使用（內有下載外掛地址）
阿新 • • 發佈：2018-12-17
簡介 fullPage.js是一個基於jQuery的全屏滾動外掛，它能夠很方便、很輕鬆的製作出全屏網站 主要功能
- 支援滑鼠滾動
- 多個回撥函式
- 支援手機、平板觸控事件
- 支援 CSS3 動畫
- 視窗縮放時自動調整
- 可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊方式等
使用方法 引入檔案 fullpage自己的css庫檔案 jQuery（版本1.6.0+） Fullpage自己的js檔案 其他擴充套件庫（jquery.easings.min.js等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fullpage和Echarts</title> <link rel="stylesheet" href="css/fullpage.min.css">//引入fullpage的css <script src="js/jquery-1.12.4.js"></script>//只支援jQuery（版本1.6.0+） <script src="js/fullpage.min.js"></script>//引入fullpage的js <!-- <script src="js/echarts.min.js"></script> --> <script src="js/myjs.js"></script>//自己的js的引入要寫在最後面。 <style> #box{ margin: 50px auto; background-color: black; } </style> </head> <body> <div id="main"> //id名隨便取 <div class="section">這是第1屏</div>//這個class名不能隨便 <div class="section"> <div class="slide">第二屏的第1張幻燈片</div> <div class="slide"> <div id="box" style="width:900px;height:500px;"> </div> </div> <div class="slide">第二屏的第3張幻燈片</div> <div class="slide">第二屏的第4張幻燈片</div> </div> <div class="section">這是第3屏</div> <div class="section">這是第4屏</div> </div> </body> <script> $('#fullpage').fullpage(); //fullpage括號內通過json格式新增配置項。 //以下是演示 $("#main").fullpage({ sectionsColor:["red","pink","yellow","green"], controlArrows:true, navigation:true, }); </script> </html>
- 配置項 sectionsColor： 可以為每一個section設定背景色 controlArrows: 定義是否通過箭頭來控制slide幻燈片，預設為true，當我們設定為false，幻燈片兩側的箭頭會消 失，在移動裝置上可以通過滑動來操作幻燈片 navigation: 是否顯示導航，預設為false，如果設定成true，會顯示小圓點，作為導航 navigationPosition: 導航小圓點的位置，可以設定為left或者right navigationTooltips: 導航小圓點的tooltips設定，預設是[]，注意按照順序設定 showActiveTooltip: 是否顯示當前頁面的導航的tooltip資訊，預設為false；
方法呼叫方式：
$.fn.fullpage.方法名 方法 moveSectionUp(): 向上滾動一頁 moveSectionDown(): 向下滾動一頁 moveTo（section，slide）: 滾動到第幾頁，第幾個幻燈片，注意，頁面是從1開始，而幻燈片是從0開始計算 silentMoveTo(section,slide) : 滾動到第幾頁，和moveTo一樣，但是沒有動畫效果
回撥函式
afterRender（）： 頁面結構生成後的回撥函式，或者說頁面初始化完成後的回撥函式 onLeave(index,nextIndex,direction) 在我們離開一個section時，會觸發一次此回撥函式，接收index，nextIndex和direction3個引數 index： 是離開的頁面的序號，從 1 開始， nextIndex：是滾動到的目標頁面的序號,從 1 開始 direction：判斷向上滑動還是往下滑動，值是 up 或者 down
<script type="text/javascript">
var full = $("#fullpage").fullpage({
//設定每屏的顏色
sectionsColor:["green","pink","blue","yellow"],
//是否通過箭頭控制幻燈片
controlArrows:true,
//是否顯示導航
navigation:true,
//位置
navigationPosition:"left",
//導航提示資訊
navigationTooltips:["01","02","03","04"],
//是否顯示當前導航的提示資訊
showActiveTooltip:true,
afterRender:function(index,nextIndex,direction){ //這就是回撥函式 函式內有三個引數
console.log("載入完了...")
},
//index,離開的螢幕序號
//nextIndex，目標的螢幕序號
//direction，滾動的方法 （上，下）
onLeave:function(index,nextIndex,direction){
console.log("index:"+index+",next:"+nextIndex+",direction:"+direction);
}
})
</script>
fullpage外掛簡介
很方便，很輕鬆製作全屏頁面
fullpage外掛下載使用
使用步驟 引入檔案 頁面骨架 fullpage方法
fullpage外掛常用API
配置項、方法、回撥函式
第一次部落格思路不是很清晰但是該有的內容都有了，只要用心看完還是能夠學會使用這個外掛的。謝謝觀賞！！！！