超級簡單實用的前端必備技能-javascript-全屏滾動插件
fullPage.jscss
fullPage.js是一個基於jQuery的全屏滾動插件，它可以很方便、很輕鬆的製做出全屏網站html
本章內容將詳細介紹Android事件的具體處理及常見事件。jquery
主要功能
- 支持鼠標滾動
- 支持前進後退和鍵盤控制
- 多個回調函數
- 支持手機、平板觸摸事件
- 支持 css3 動畫
- 支持窗口縮放
- 窗口縮放時自動調整
- 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等
fullPage.js 支持 IE8+ 及其餘現代瀏覽器
css3
導入插件數組
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/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>
JSide
$(function(){
$('#fullpage').fullpage({
'verticalCentered': false,
'css3': true,
'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
anchors: ['page1', 'page2', 'page3', 'page4'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
})
})
/*組建好網頁佈局後,必須選中包裹全部 section 的 div 的 id,並調用 fullPage()方法,才能加載佈局*/
/*調用 fullPage() 方法後,能夠給函數傳入對象類型的參數,設置fullPage 的各類屬性*/
$('#fullPage').fullpage({
/*內容是否垂直居中,默認true*/
/*verticalCentered:true;*/
/*字體是否隨窗口縮放,默認false*/
/*resize:true;*/
/*設置每一屏的背景色*/
/*sectionColor:["#FF0000","#00FF00","#0000FF"],*/
/*設置每一屏的錨點,能夠直接跳轉到該屏*/
anchors:["page1","page2","page3"],
/*設置單頁滾動速度,默認700毫秒*/
// scrollingSpeed:300,
/*設置滾動動畫方式
* JQuery 只支持幾種動畫特效,更多動畫特效,
*/
// easing:"easeInQuart",
/*綁定一個菜單 ，詳見HTML
*/
// menu:"#menu",
/*navigation 布爾值 false 是否顯示項目導航小圓點
navigationPosition 字符串 right 項目導航的位置，可選 left 或 right
navigationColor 字符串 #000 項目導航的顏色
navigationTooltips 數組 空 項目導航的 tip 提示*/
navigation:true,
// navigationPosition:"left",
navigationTooltips:["第一頁","第二頁","第三頁"],
/*設置幻燈片的導航
* slidesNavigation 布爾值 false 是否顯示左右滑塊的項目導航
slidesNavPosition 字符串 bottom 左右滑塊的項目導航的位置，可選 top 或 bottom*/
slidesNavigation:true,
// controlArrowColor 字符串 #fff 左右滑塊的箭頭的背景顏色
controlArrowColor:"RGBA(0,0,0,0.3)",
/*loopBottom 布爾值 false 滾動到最底部後是否滾回頂部
loopTop 布爾值 false 滾動到最頂部後是否滾底部
continuousVertical 布爾值 false 是否循環滾動，與 loopTop 及 loopBottom 不兼容
* autoScrolling 布爾值 true 是否使用插件的滾動方式，若是選擇 false，則會出現瀏覽器自帶的滾動條*/
continuousVertical:true,
/*設置幻燈片是否水平循環，默認true
loopHorizontal 布爾值 true 左右滑塊是否循環滑動*/
loopHorizontal:false,
/*scrollOverflow 布爾值 false 內容超過滿屏後是否顯示滾動條*/
/*設置內容超出滿屏區域後，是否顯示滾動條，必需要導入scrolloverflow.js才能使用*/
/*css3 布爾值 false 是否使用 CSS3 transforms 滾動
* paddingTop 字符串 0 與頂部的距離
paddingBottom 字符串 0 與底部距離
*
*
* keyboardScrolling 布爾值 true 是否使用鍵盤方向鍵導航
* */
/*手持設備的觸控靈敏度 數值越大越難翻頁 100%屏幕高度*/
touchSensitivity:7,
/*瀏覽器直接大開指定錨點時是否滾動效果 animateAnchor 默認爲true*/
/*回調函數
*
*
*
*
*
*
*
*
*
*
* afterLoad 滾動到某一屏後的回調函數，接收 anchorLink 和 index 兩個參數
* ，anchorLink 是錨連接的名稱，index 是序號，從1開始計算 滾動到某一屏後的回調函數
* ，接收 anchorLink 和 index 兩個參數，anchorLink 是錨連接的名稱，index 是當前頁面序號，從1開始計算*/
afterLoad:function(anchorLink,index){
console.log(index) ;
console.log(anchorLink);
},
/*onLeave 滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數：
* index 是離開的「頁面」的序號，從1開始計算；
nextIndex 是滾動到的「頁面」的序號，從1開始計算；
direction 判斷往上滾動仍是往下滾動，值是 up 或 down。*/
onLeave:function(index,nextIndex,direction){
console.log(index) ;
console.log(nextIndex) ;
console.log(direction) ;
},
/*afterRender 頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數，先執行第一個頁面的afterload ， 而後在執行afterrender
*/
afterRender:function(){
console.log("這是afterRender 頁面初次加載 執行一次的回調函數")
},
/*/* afterSlideLoad 滾動到某一水平滑塊後的回調函數，與 afterLoad 相似，
接收 anchorLink、幻燈片所在的section的錨點
index、幻燈片所在的section的序號
slideIndex、 幻燈片自身的序號
slideAnchor ， 幻燈片自身的錨點（若是沒有顯示slideindex） 4個參數
onSlideLeave 某一水平滑塊滾動前的回調函數，與 onLeave 相似，
當幻燈片離開換到另外一張幻燈片時，觸發
接收 anchorLink、index、slideIndex、direction、nextSlideIndex 5個參數
anchorLink、幻燈片所在的section的錨點
index、幻燈片所在的section的序號
slideIndex、 幻燈片自身的序號
direction、幻燈片移動的方向，left和right
nextSlideIndex 、切換到的幻燈片的序號，從0開始
*/
});
});
| 選項 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| verticalCentered | 字符串 | true | 內容是否垂直居中 |
| resize | 布爾值 | false | 字體是否隨着窗口縮放而縮放 |
| slidesColor | 函數 | 無 | 設置背景顏色 |
| anchors | 數組 | 無 | 定義錨連接 |
| scrollingSpeed | 整數 | 700 | 滾動速度，單位爲毫秒 |
| easing | 字符串 | easeInQuart | 滾動動畫方式 |
| menu | 布爾值 | false | 綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單能夠控制滾動 |
| navigation | 布爾值 | false | 是否顯示項目導航 |
| navigationPosition | 字符串 | right | 項目導航的位置，可選 left 或 right |
| navigationColor | 字符串 | #000 | 項目導航的顏色 |
| navigationTooltips | 數組 | 空 | 項目導航的 tip |
| slidesNavigation | 布爾值 | false | 是否顯示左右滑塊的項目導航 |
| slidesNavPosition | 字符串 | bottom | 左右滑塊的項目導航的位置，可選 top 或 bottom |
| controlArrowColor | 字符串 | #fff | 左右滑塊的箭頭的背景顏色 |
| loopBottom | 布爾值 | false | 滾動到最底部後是否滾回頂部 |
| loopTop | 布爾值 | false | 滾動到最頂部後是否滾底部 |
| loopHorizontal | 布爾值 | true | 左右滑塊是否循環滑動 |
| autoScrolling | 布爾值 | true | 是否使用插件的滾動方式，若是選擇 false，則會出現瀏覽器自帶的滾動條 |
| scrollOverflow | 布爾值 | false | 內容超過滿屏後是否顯示滾動條 |
| css3 | 布爾值 | false | 是否使用 CSS3 transforms 滾動 |
| paddingTop | 字符串 | 0 | 與頂部的距離 |
| paddingBottom | 字符串 | 0 | 與底部距離 |
| fixedElements | 字符串 | 無 | |
| normalScrollElements | 無 | ||
| keyboardScrolling | 布爾值 | true | 是否使用鍵盤方向鍵導航 |
| touchSensitivity | 整數 | 5 | |
| continuousVertical | 布爾值 | false | 是否循環滾動，與 loopTop 及 loopBottom 不兼容 |
| animateAnchor | 布爾值 | true | |
| normalScrollElementTouchThreshold | 整數 | 5 |
二、方法
| 名稱 | 說明 |
|---|---|
| moveSectionUp() | 向上滾動 |
| moveSectionDown() | 向下滾動 |
| moveTo(section, slide) | 滾動到 |
| moveSlideRight() | slide 向右滾動 |
| moveSlideLeft() | slide 向左滾動 |
| setAutoScrolling() | 設置頁面滾動方式，設置爲 true 時自動滾動 |
| setAllowScrolling() | 添加或刪除鼠標滾輪/觸控板控制 |
| setKeyboardScrolling() | 添加或刪除鍵盤方向鍵控制 |
| setScrollingSpeed() | 定義以毫秒爲單位的滾動速度 |
三、回調函數
| 名稱 | 說明 |
|---|---|
| afterLoad | 滾動到某一屏後的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨連接的名稱，index 是序號，從1開始計算 |
| onLeave | 滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數： index 是離開的「頁面」的序號，從1開始計算； nextIndex 是滾動到的「頁面」的序號，從1開始計算； direction 判斷往上滾動仍是往下滾動，值是 up 或 down。 |
| afterRender | 頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數 |
| afterSlideLoad | 滾動到某一水平滑塊後的回調函數，與 afterLoad 相似，接收 anchorLink、index、slideIndex、direction 4個參數 |
| onSlideLeave | 某一水平滑塊滾動前的回調函數，與 onLeave 相似，接收 anchorLink、index、slideIndex、direction 4個參數 |
相關文章
- 1. 全屏滾動插件
- 2. 全屏滾動-jQuery插件實現
- 3. 用 ES6 寫全屏滾動插件
- 4. vscode前端必備插件
- 5. VSCode 前端必備插件
- 6. 前端必備技能
- 7. 大前端必備網站-超全
- 8. jQuery全屏滾動插件fullPage
- 9. jQuery全屏滾動插件fullPage.js
- 10. Fullpage.js全屏滾動jQuery插件
- 更多相關文章...
- • PHP 超級全局變量 - PHP教程
- • jQuery Mobile 滾屏事件 - jQuery Mobile 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 全屏滾動插件
- 2. 全屏滾動-jQuery插件實現
- 3. 用 ES6 寫全屏滾動插件
- 4. vscode前端必備插件
- 5. VSCode 前端必備插件
- 6. 前端必備技能
- 7. 大前端必備網站-超全
- 8. jQuery全屏滾動插件fullPage
- 9. jQuery全屏滾動插件fullPage.js
- 10. Fullpage.js全屏滾動jQuery插件