前幾天,偶然看到一個前端工程師的簡歷.
是一個頁面形式的簡歷.第一次見到把自己的簡歷能夠?qū)懗身撁娴?大部分應(yīng)聘者的簡歷全部都是紙質(zhì)的,沒有新意.
我在看到他的簡歷的時候,我覺得新奇,然后出于我的習(xí)慣,我總是會去看法這工具去看開發(fā)者寫的代碼.
然后我看到fullpage.js
我自己才疏學(xué)淺,看到fullpage.js這個框架的時候,我就直接去百度了(有啥事我都是找度娘.哈哈哈哈哈~)
然后知道了fullpage.js是一個依于jQuery全屏滾動插件
一個這樣簡單的fullpage.js插件就能夠完成一個全屏滾動的效果,對于我這種懶惰的人來說,這簡直就是對我的福利.我當(dāng)然要學(xué)起來.
第一步.我需要先把fullpage需要用到的庫下載下來.
第二步.剛才我就說過,fullpage是一個依賴jquery庫的一個插件,所以我們也需要準(zhǔn)備一個jquery庫.但是,我們并不是所有版本的jquery庫都能試用.我們需要一個1.7+版本以上的jquery庫.
第三步,接下來我們的準(zhǔn)備工作已經(jīng)做好.我們需要準(zhǔn)備一個demo.html頁面去測試一下.
截圖放在這里的時候,我們還不太明白,fullpage不就是一個用來做全屏滾動的嗎.他到底都能夠做什么.下面這張截圖是我在網(wǎng)上看到的他的總的作用.
第四步.寫布局
在這個布局里面,有一個最大的容器,#fullpage,這個是布局必需要有的容器.容器的名字可以更改(可以改成aa,bb,cc,這只是開個玩笑,起的名字一定要跟內(nèi)容有關(guān)聯(lián))
上面那段html代碼是最基本的布局.每一個section代表一屏.默認(rèn)顯示的是第一屏.如果我們想指定一下顯示的屏幕,我們給相對應(yīng)的屏添加一個類名(class='active')就可以啦
第五步.寫js代碼
這里你們肯定很奇怪,我明明庫也已經(jīng)引入了,為什么還要寫js代碼.
這其實(shí)很簡單,就相當(dāng)于是,我們打好了一份飯,就差吃的這個動作.那引到這里應(yīng)該就明白啦.
這下應(yīng)該明白我為什么把所有的屏都放在容器里面了吧.
