用膩了ppt，prezi的風格看起來更酷一點兒，無意中得知有Impress.js這么一個H5版的prezi，nice，值得一試。

關于Impress.js，網上教程很多，但說實話就跟教小朋友一樣，一步一步的，又無聊又不得要領。

要我說，學Impress.js，只要幾分鐘~

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

<script src=""></script>

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

"./static/js/impress.js"

也可以是來自百度靜態資源庫，那么這么寫

"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就初始化了。

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

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

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

ok，看完以上內容，應該就可以做自己的H5版prezi了。因為太簡單了所以懶得好好組織語言了。講的不明白的地方看看我的一個練手的源碼吧。

我的GitHub上的一個練手的作品

總結

以上是生活随笔為你收集整理的体验Impress.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。