impress.js表現(xiàn)層框架(演示工具)-初體驗(yàn)

2024-08-30 08:34:56

字體：大中小

供稿：網(wǎng)友

博客一歇就是半年，略慚愧...元旦假期各種愜意：打打Dota(悲催的輸多贏少)、滑滑雪；吃吃東西、逛逛街。轉(zhuǎn)眼兒今天就得上班了，5點(diǎn)早早起床(最近堅(jiān)持早睡早起)，忍不住分享下前段時(shí)間發(fā)現(xiàn)的前端工程師裝X的利器，所以這新年第一篇博文誕生了:)
你希望別人看到你的演示文稿會(huì)發(fā)出“wow”嗎？你希望使用華麗的效果來(lái)震驚你的觀眾嗎？那咱們往下看
------------------正文分割線------------------
概述
如果你已經(jīng)厭煩了使用PowerPoint制作PPT，那么impress.js是一個(gè)非常好的選擇，用它做的PPT更加直觀，效果也非常的不錯(cuò)。裝X是需要一定代價(jià)的，不過(guò)如果你是個(gè)前端愛(ài)好者那么一切就沒(méi)問(wèn)題了。當(dāng)然如果你能勉強(qiáng)明白HTML和CSS也沒(méi)問(wèn)題，看看這篇文章 + 一點(diǎn)點(diǎn)實(shí)踐（把官網(wǎng)上的例子拿來(lái)改改）即可...
impress.js 是國(guó)外一位開(kāi)發(fā)者受 Prezi 啟發(fā)，采用 CSS3 與 JavaScript 語(yǔ)言完成的一個(gè)可供開(kāi)發(fā)者使用的表現(xiàn)層框架(演示工具)。現(xiàn)在普通開(kāi)發(fā)者可以利用 impress.js 自己開(kāi)發(fā)出類似效果的演示工具，但性能比基于 FLASH 的 Prezi 更優(yōu)。其功能包括畫布的無(wú)限旋轉(zhuǎn)與縮放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同時(shí)，也支持傳統(tǒng) PowerPoint 形式的幻燈演示。
目前 impress.js 是基于 webkit 瀏覽器（Chrome、Safari）開(kāi)發(fā)，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的瀏覽器也能正常運(yùn)行。
impreess源碼已經(jīng)發(fā)布在GitHub上，地址：https://github.com/bartaz/impress.js
官方demo地址：http://bartaz.github.com/impress.js
因?yàn)樵谄漤?xiàng)目網(wǎng)頁(yè)中卻沒(méi)有找到說(shuō)明文檔&使用文檔，所以這篇文章將一步一步創(chuàng)建一個(gè)較初級(jí)的演示文稿，我們接著往下走。
請(qǐng)準(zhǔn)備好現(xiàn)代瀏覽器：Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持，不知道為什么很多資料上寫著IE10也能支持，背了個(gè)催。

配置
html5頁(yè)面結(jié)構(gòu)先準(zhǔn)備就緒
創(chuàng)建一個(gè)id="impress"的wrapper(載體)，直接div就好，其他標(biāo)簽同樣也可以
在body標(biāo)簽結(jié)束前引入impress.js文件并且調(diào)用
class="impress-not-supported"是當(dāng)瀏覽器不支持時(shí)顯示給用戶的提示信息，降級(jí)處理你懂的，不多解釋哈

復(fù)制代碼

上一篇：CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語(yǔ)總結(jié)

下一篇：html5中幾個(gè)不容錯(cuò)過(guò)的api或者tips小結(jié)