查看原文
http://www.ibloger.net/article/425.html
簡介
fullPage.js是一個基於jQuery的全屏滾動插件,它能夠很方便、很輕鬆的製作出全屏網站。有很多網站都做了全屏滾動的特效,效果也很好看,今天就給大家說說fullPage.js的使用方法和設置。
主要功能
- 支持鼠標滾動
- 支持前進後退和鍵盤控制
- 多個回調函數
- 支持手機、平板觸摸事件
- 支持 CSS3 動畫
- 支持窗口縮放 窗口縮放時自動調整
- 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等
兼容性
fullPage.js 支持 IE8+ 及其他現代瀏覽器。
使用方法
1、引入文件
<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>
2、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>
3、JavaScript
$(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']
})
})
經測試,最好至少有 anchors 這個參數,否則在火狐瀏覽器中,第一次滾動會直接滾到底部。可能是版本問題,以後版本可能會有修復
點擊這裏查看上面代碼的示例:http://www.uedsc.com/wp-content/uploads/2015/02/fullpage-demo/
配置
1、選項
選項 | 類型 | 默認值 | 說明 |
---|---|---|---|
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 | 是否使用 |
paddingTop | 字符串 | 0 | 與頂部的距離 |
paddingBottom | 字符串 | 0 | 與底部距離 |
fixedElements | 字符串 | 無 | |
normalScrollElements | 無 | ||
keyboardScrolling | 布爾值 | true | 是否使用鍵盤方向鍵導航 |
touchSensitivity | 整數 | 5 | |
continuousVertical | 布爾值 | false | 是否循環滾動,與 loopTop 及 |
animateAnchor | 布爾值 | true | |
normalScrollElementTouchThreshold | 整數 | 5 |
2、方法
名稱 | 說明 |
---|---|
moveSectionUp() | 向上滾動 |
moveSectionDown() | 向下滾動 |
moveTo(section, slide) | 滾動到 |
moveSlideRight() | slide 向右滾動 |
moveSlideLeft() | slide 向左滾動 |
setAutoScrolling() | 設置頁面滾動方式,設置爲 true 時自動滾動 |
setAllowScrolling() | 添加或刪除鼠標滾輪/觸控板控制 |
setKeyboardScrolling() | 添加或刪除鍵盤方向鍵控制 |
setScrollingSpeed() | 定義以毫秒爲單位的滾動速度 |
3、回調函數
如何獲取
官方網站 | 下載地址 | fullPage.js GitHub 地址:https://github.com/alvarotrigo/fullPage.js