一逃延、一般配置項(xiàng)
- 在頁面結(jié)構(gòu)加載完之后卓囚,調(diào)用fullpage()方法實(shí)現(xiàn)整個(gè)單頁面切換的功能套鹅。
('#fullpage').fullpage();
})
//后面所有的控制項(xiàng)站蝠,均寫在fullpage()內(nèi)部,多個(gè)控制項(xiàng)之間用逗號(hào)隔開。
- 通過sectionsColor控制每個(gè)頁面的背景色卓鹿。
$('#fullpage').fullpage({
sectionsColor:['red','green','blue']
})
- controlArrows控制是否顯示幻燈片左右兩邊的箭頭菱魔,默認(rèn)值為true,即顯示吟孙。
需要借助fullpage.css
$('#fullpage').fullpage({
controlArrows:false
})
- verticalCentered控制每個(gè)section的文字上下是否居中澜倦,默認(rèn)為true。
$('#fullpage').fullpage({
controlArrows:false,
verticalCentered:false
})
- resize控制section里文字的字體大小是否歲窗口縮放杰妓,默認(rèn)為false藻治。
resize:true
- scrollingSpeed設(shè)置頁面間滾動(dòng)切換的速度,默認(rèn)為700ms巷挥。
scrollingSpeed:1000
- anchors為每個(gè)section頁面添加錨鏈接桩卵,當(dāng)頁面滾動(dòng)到某個(gè)頁面的時(shí)候,地址欄的后面會(huì)追加對(duì)應(yīng)錨鏈接的值。通過這種方式可以直接定位我們想要出現(xiàn)的頁面雏节。
anchor:['page1','page2','page3']
- lockAnchor鎖定錨鏈接胜嗓,頁面滾動(dòng)切換的時(shí)候,地址欄的地址是否發(fā)生改變钩乍。
lockAnchor:true
- css3設(shè)置是否支持css3的動(dòng)畫效果辞州,默認(rèn)為true。如果設(shè)置為false或者在不支持css3的瀏覽器下則利用JQ模擬動(dòng)畫效果寥粹。
css3:true/false
二变过、滾動(dòng)配置項(xiàng)
- loopTop 當(dāng)頁面滾動(dòng)到最頂部之后,是否滾動(dòng)到最底部進(jìn)行循環(huán)滾動(dòng)涝涤,默認(rèn)為false牵啦。
loopTop:false/true
- loopBottom 當(dāng)頁面滾動(dòng)到最底部之后,是否滾動(dòng)到最頂部進(jìn)行循環(huán)滾動(dòng)妄痪,默認(rèn)為false哈雏。
loopBottom:false/true
- loopHorizontal 頁面中的橫向幻燈片是否循環(huán)滾動(dòng),默認(rèn)為true衫生。
loopHorizontal:true/false
- autoScrolling是否使用fullpage自己的滾動(dòng)方式裳瘪,默認(rèn)為true。如果設(shè)置為false罪针,頁面將不會(huì)按頁切換彭羹。
autoScrolling:true/false
- scrollBar 是否顯示瀏覽器自帶的滾動(dòng)條,默認(rèn)為false泪酱。
scrollBar:false/true
- paddingTop與paddingBottom 為每個(gè)section設(shè)置上下的內(nèi)邊距派殷。
paddingTop:'100px',
paddingBottom:'50px'
- fixedElements 將某個(gè)元素固定在fullpage的頁面當(dāng)中(配合position:fixed),使其不隨頁面的滾動(dòng)而滾動(dòng)墓阀。如果只是用css的posirion:fixed對(duì)某個(gè)元素進(jìn)行固定定位毡惜,該元素會(huì)被覆蓋。
fixedElements:'#elemId'
//elemId為被固定元素的id
- keyBoardScrolling是否使用鍵盤的方向鍵控制頁面滾動(dòng)斯撮,默認(rèn)為true经伙。
keyBoardScrolling:true/false
- TouchSensitivity 控制移動(dòng)設(shè)備滑動(dòng)敏感系數(shù),默認(rèn)為5勿锅,按照百分比來衡量帕膜,最高為100,該系數(shù)越大則頁面越難被滑動(dòng)溢十。
touchSensitivity:10
- continuousVertical 控制頁面是否循環(huán)滾動(dòng)垮刹,不會(huì)像loopTop跟loopBottom那樣出現(xiàn)一個(gè)跳動(dòng)(與它倆不兼容,不可同時(shí)設(shè)置)张弛,直接順序循環(huán)荒典。默認(rèn)為false宗挥。
continuousVertical:false/true
11.animateAuthor控制是否從第一個(gè)section已動(dòng)畫的方式滾動(dòng)到定位的錨鏈接,默認(rèn)為true种蝶。
animateAuthor:true/false
三契耿、菜單與導(dǎo)航設(shè)置
通過menu控制項(xiàng)給fullpage添加菜單,并且把菜單跟每個(gè)頁面的錨鏈接綁定到一起螃征。
菜單代碼如下:
導(dǎo)航菜單.png
fullpage控制項(xiàng)如下:
$('#fullpage').fullpage({
anchors:['page1','page2','page3']搪桂,//為頁面添加錨鏈接
menu:'#Menu' //生成fullpage菜單
})
- recordHistory 設(shè)置是否由瀏覽器自帶的
回退
與前進(jìn)
按鈕來控制fullpage單頁面之間按照歷史記錄進(jìn)行切換,即當(dāng)你通過鼠標(biāo)滾輪滾動(dòng)到第三屏之后盯滚,可以通過瀏覽器自帶的回退
按鈕踢械,返回到第二屏跟第一屏。默認(rèn)為true魄藕。
recordHistory:true/false
- navigation 控制是否顯示導(dǎo)航小圓點(diǎn)内列,默認(rèn)為false。
navigationPosition 控制小圓點(diǎn)導(dǎo)航位置背率,right跟left话瞧。
navigationTooltips 控制鼠標(biāo)移入小圓點(diǎn)之后的提示。
showActiveTooltips 是否顯示當(dāng)前section頁面的提示文字寝姿,默認(rèn)為false交排。
navigation:true,
navigationPosition:'right',
navigationTooltips:['page1','page2','page3'],
showActiveTooltips:true
- slidesNavigation 是否顯示橫向幻燈片的導(dǎo)航,默認(rèn)為false饵筑。
slidesNavPosition 幻燈片導(dǎo)航位置埃篓,可以為'top'或'bottom'。