用膩了ppt，prezi的風(fēng)格看起來(lái)更酷一點(diǎn)兒，無(wú)意中得知有Impress.js這么一個(gè)H5版的prezi，nice，值得一試。

關(guān)于Impress.js，網(wǎng)上教程很多，但說(shuō)實(shí)話就跟教小朋友一樣，一步一步的，又無(wú)聊又不得要領(lǐng)。

要我說(shuō)，學(xué)Impress.js，只要幾分鐘~

引入Impress.js，注意要在body末尾，也就是</body>標(biāo)簽前引用，這樣里面的代碼才會(huì)在你的html加載完成后再執(zhí)行。

<script src=""></script>

""里面填url。可以是你下載到本地的，那么這么寫(xiě)

"./static/js/impress.js"

也可以是來(lái)自百度靜態(tài)資源庫(kù)，那么這么寫(xiě)

"http://apps.bdimg.com/libs/impress.js/0.5.3/impress.js"

也可以直接引用作者的示例工程的

"http://impress.github.io/impress.js/js/impress.js"

甚至直接引用我fork的

"http://zhengxiaoyao0716.github.io/FunCodeImpress/static/js/impress.js"

再在body末尾，也就是</body>前加一句

<script>impress().init();</script>

這樣Impress.js就初始化了。

提供一個(gè)id為impress的div，用來(lái)展示。但在這之前，我們最好先提供一個(gè)class為impress-not-supported的div，里面再建立一個(gè)class為fallback-message的div（其實(shí)直接把fallback-message補(bǔ)充到之前的div的class里也成），然后在其內(nèi)寫(xiě)上如果瀏覽器不支持Impress.js時(shí)的提示。是的，網(wǎng)上的教程基本都這么說(shuō)的，然并卵，你的提示并沒(méi)有如其名般的僅在不支持時(shí)顯示。為什么呢？因?yàn)槟氵€缺少一個(gè)css樣式。Impress.js作者建議我們定義自己的css樣式，怎么定義可以參照他提供的impress-demo.css。（然而我直接照搬引用了~就是懶~~~怎么引用？見(jiàn)1，跟那差不多）

然后，在id為impress的div里，你就可以寫(xiě)自己的內(nèi)容了。我不會(huì)告訴你怎么一步步去寫(xiě)，無(wú)聊死了。你可以先設(shè)想有一個(gè)很大的平面，然后在上面放上一塊塊的內(nèi)容。每一塊內(nèi)容就是一個(gè)div，指定其class為step，這樣瀏覽時(shí)就會(huì)按定義的先后順序逐一瀏覽它們。然后再為其增加一些屬性，來(lái)確定它應(yīng)該顯示在什么坐標(biāo)上(data-x="?" data-y="?")，以什么樣的旋轉(zhuǎn)角度（2維：data-rotate="?"，立體：data-rotate-x/y/z="?"），多大的大小(data-scale="?")

最后是一些高級(jí)的用法：指定一個(gè)class為overview的空白div，把它的坐標(biāo)位置、大小、旋轉(zhuǎn)設(shè)定好，比如坐標(biāo)設(shè)置在所有整個(gè)平面的中心，大小為整個(gè)平面，于是你就得到了一個(gè)全局的俯視圖。為一個(gè)step的class增加slide標(biāo)簽，那么你就得到了一張帶白色背景和一些特殊樣式的類(lèi)似ppt單張的div，具體有還哪些樣式，怎么用，多看一些示例的源碼就知道了。或者，直接看impress-demo.css里面怎么定義的，當(dāng)然，這些樣式是需要引入impress-demo.css的，你不引入的話是沒(méi)有的。也可以自己修改定義，事實(shí)上原作者建議你這么做。

ok，看完以上內(nèi)容，應(yīng)該就可以做自己的H5版prezi了。因?yàn)樘?jiǎn)單了所以懶得好好組織語(yǔ)言了。講的不明白的地方看看我的一個(gè)練手的源碼吧。

我的GitHub上的一個(gè)練手的作品

總結(jié)

以上是生活随笔為你收集整理的体验Impress.js的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。