體驗Impress.js

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

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

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

1. 引入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"

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

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

   這樣Impress.js就初始化了。

3. 提供一個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，跟那差不多）

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

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

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

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