fullpage控制項(xiàng)匯總(1)

一逃延、一般配置項(xiàng)

  1. 在頁面結(jié)構(gòu)加載完之后卓囚,調(diào)用fullpage()方法實(shí)現(xiàn)整個(gè)單頁面切換的功能套鹅。

(function(){('#fullpage').fullpage();
})
//后面所有的控制項(xiàng)站蝠,均寫在fullpage()內(nèi)部,多個(gè)控制項(xiàng)之間用逗號(hào)隔開。

  1. 通過sectionsColor控制每個(gè)頁面的背景色卓鹿。

$('#fullpage').fullpage({
sectionsColor:['red','green','blue']
})

  1. controlArrows控制是否顯示幻燈片左右兩邊的箭頭菱魔,默認(rèn)值為true,即顯示吟孙。

需要借助fullpage.css
$('#fullpage').fullpage({
controlArrows:false
})

  1. verticalCentered控制每個(gè)section的文字上下是否居中澜倦,默認(rèn)為true。

$('#fullpage').fullpage({
controlArrows:false,
verticalCentered:false
})

  1. resize控制section里文字的字體大小是否歲窗口縮放杰妓,默認(rèn)為false藻治。

resize:true

  1. scrollingSpeed設(shè)置頁面間滾動(dòng)切換的速度,默認(rèn)為700ms巷挥。

scrollingSpeed:1000

  1. anchors為每個(gè)section頁面添加錨鏈接桩卵,當(dāng)頁面滾動(dòng)到某個(gè)頁面的時(shí)候,地址欄的后面會(huì)追加對(duì)應(yīng)錨鏈接的值。通過這種方式可以直接定位我們想要出現(xiàn)的頁面雏节。

anchor:['page1','page2','page3']

  1. lockAnchor鎖定錨鏈接胜嗓,頁面滾動(dòng)切換的時(shí)候,地址欄的地址是否發(fā)生改變钩乍。

lockAnchor:true

  1. css3設(shè)置是否支持css3的動(dòng)畫效果辞州,默認(rèn)為true。如果設(shè)置為false或者在不支持css3的瀏覽器下則利用JQ模擬動(dòng)畫效果寥粹。

css3:true/false

二变过、滾動(dòng)配置項(xiàng)

  1. loopTop 當(dāng)頁面滾動(dòng)到最頂部之后,是否滾動(dòng)到最底部進(jìn)行循環(huán)滾動(dòng)涝涤,默認(rèn)為false牵啦。

loopTop:false/true

  1. loopBottom 當(dāng)頁面滾動(dòng)到最底部之后,是否滾動(dòng)到最頂部進(jìn)行循環(huán)滾動(dòng)妄痪,默認(rèn)為false哈雏。

loopBottom:false/true

  1. loopHorizontal 頁面中的橫向幻燈片是否循環(huán)滾動(dòng),默認(rèn)為true衫生。

loopHorizontal:true/false

  1. autoScrolling是否使用fullpage自己的滾動(dòng)方式裳瘪,默認(rèn)為true。如果設(shè)置為false罪针,頁面將不會(huì)按頁切換彭羹。

autoScrolling:true/false

  1. scrollBar 是否顯示瀏覽器自帶的滾動(dòng)條,默認(rèn)為false泪酱。

scrollBar:false/true

  1. paddingTop與paddingBottom 為每個(gè)section設(shè)置上下的內(nèi)邊距派殷。

paddingTop:'100px',
paddingBottom:'50px'

  1. fixedElements 將某個(gè)元素固定在fullpage的頁面當(dāng)中(配合position:fixed),使其不隨頁面的滾動(dòng)而滾動(dòng)墓阀。如果只是用css的posirion:fixed對(duì)某個(gè)元素進(jìn)行固定定位毡惜,該元素會(huì)被覆蓋。

fixedElements:'#elemId'
//elemId為被固定元素的id

  1. keyBoardScrolling是否使用鍵盤的方向鍵控制頁面滾動(dòng)斯撮,默認(rèn)為true经伙。

keyBoardScrolling:true/false

  1. TouchSensitivity 控制移動(dòng)設(shè)備滑動(dòng)敏感系數(shù),默認(rèn)為5勿锅,按照百分比來衡量帕膜,最高為100,該系數(shù)越大則頁面越難被滑動(dòng)溢十。

touchSensitivity:10

  1. 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菜單

})

  1. recordHistory 設(shè)置是否由瀏覽器自帶的回退前進(jìn)按鈕來控制fullpage單頁面之間按照歷史記錄進(jìn)行切換,即當(dāng)你通過鼠標(biāo)滾輪滾動(dòng)到第三屏之后盯滚,可以通過瀏覽器自帶的回退按鈕踢械,返回到第二屏跟第一屏。默認(rèn)為true魄藕。

recordHistory:true/false

  1. 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

  1. slidesNavigation 是否顯示橫向幻燈片的導(dǎo)航,默認(rèn)為false饵筑。
    slidesNavPosition 幻燈片導(dǎo)航位置埃篓,可以為'top'或'bottom'。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末根资,一起剝皮案震驚了整個(gè)濱河市架专,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌玄帕,老刑警劉巖部脚,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異桨仿,居然都是意外死亡睛低,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門服傍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人骂铁,你說我怎么就攤上這事吹零。” “怎么了拉庵?”我有些...
    開封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵灿椅,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng)茫蛹,這世上最難降的妖魔是什么操刀? 我笑而不...
    開封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮婴洼,結(jié)果婚禮上骨坑,老公的妹妹穿的比我還像新娘。我一直安慰自己柬采,他們只是感情好欢唾,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著粉捻,像睡著了一般礁遣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肩刃,一...
    開封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天祟霍,我揣著相機(jī)與錄音,去河邊找鬼盈包。 笑死浅碾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的续语。 我是一名探鬼主播垂谢,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼疮茄!你這毒婦竟也來了滥朱?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤力试,失蹤者是張志新(化名)和其女友劉穎徙邻,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體畸裳,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡宦言,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年表牢,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡装诡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出乳蛾,到底是詐尸還是另有隱情绘搞,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布扰魂,位于F島的核電站麦乞,受9級(jí)特大地震影響蕴茴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜姐直,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一倦淀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧声畏,春花似錦撞叽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至辫狼,卻和暖如春初斑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背膨处。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工见秤, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人真椿。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓鹃答,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親突硝。 傳聞我的和親對(duì)象是個(gè)殘疾皇子测摔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 學(xué)習(xí) jQuery-fullPage.js 插件已經(jīng)兩天,參照網(wǎng)上的案例仿造了一個(gè)“魅族Note2官網(wǎng)”網(wǎng)頁解恰,中間...
    seporga閱讀 6,476評(píng)論 2 11
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理锋八,服務(wù)發(fā)現(xiàn),斷路器护盈,智...
    卡卡羅2017閱讀 134,699評(píng)論 18 139
  • 在頁面引入挟纱,需要先引入jQuery 進(jìn)入cdnjs官網(wǎng),搜索fullpagejquery.fullPage.css...
    質(zhì)真如渝閱讀 4,704評(píng)論 1 6
  • fullpage配置項(xiàng) 調(diào)用fullpage.js$('#fullpage').fullpage() sectio...
    LeoCong閱讀 3,399評(píng)論 0 2
  • 文/張又可 節(jié)選自張又可文集《青春的遺囑》 從哪兒說起呢腐宋,當(dāng)我開始看書只看書的前言紊服、序言的時(shí)候還是2007年呢,隨...
    張又可閱讀 201評(píng)論 0 0