免費(fèi)AI編程助手
JavaScript輕量級框架系列（1）
本文是JavaScript輕量級框架系列的第一篇文章。
Impress.js是基于webkit內(nèi)核瀏覽器（Chrome、Safari等）開發(fā)，而在其他基于非webkit引擎但支持CSS3 3D的瀏覽器也能正常運(yùn)行。
- Impress.js源碼已經(jīng)發(fā)布在Github上，地址：https://github.com/bartaz/impress.js
- 官方demo地址：http://bartaz.github.com/impress.js
配置
- html5頁面結(jié)構(gòu)先準(zhǔn)備就緒
- 創(chuàng)建一個(gè)
id="impress"的wrapper，可以直接是一個(gè)div，當(dāng)然其他標(biāo)簽也是可以的 - 在
body標(biāo)簽結(jié)束前引入impress.js文件并且調(diào)用 class="impress-not-supported"是當(dāng)瀏覽器不支持時(shí)顯示給用戶的提示信息，降級處理
<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta charset="utf-8" />
<link rel="external nofollow" target="_blank" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported"></div>
<div id="impress"></div>
<script src="http://bartaz.github.com/impress.js/js/impress.js" rel="external nofollow" ></script>
<script>
impress().init();
</script>
</body>
</html>在wrapper內(nèi)創(chuàng)建一個(gè)幻燈片只需要新建一個(gè)class="step"的<div>即可。<div>的id可有可無，當(dāng)有id時(shí)url中的hash變化是隨著id走；反之就是step-[num]。
數(shù)據(jù)屬性
- data-x 幻燈片的x坐標(biāo)
- data-y 幻燈片的y坐標(biāo)
- data-scale 通過指定一個(gè)值來進(jìn)行縮放，data-scale為5則將會在你幻燈片原始尺寸基礎(chǔ)上放大5倍
- data-rotate 通過一個(gè)數(shù)字度數(shù)來確定旋轉(zhuǎn)你的幻燈片
- data-rotate-x 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對 x軸 旋轉(zhuǎn)多少度（前傾、后仰）
- data-rotate-y 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對 y軸 旋轉(zhuǎn)多少度（左擺、右擺）
- data-rotate-z 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對 z軸 旋轉(zhuǎn)多少度
創(chuàng)建
從一個(gè)出師的幻燈片開始，這個(gè)幻燈片已將它的data-x和data-y數(shù)據(jù)屬性設(shè)置為0，所以會出現(xiàn)在頁面的中間。
<div class="step" data-x="0" data-y="0">
This is slide1
</div>第二個(gè)幻燈片的data-x的值為500，data-y的值為0，活動(dòng)的時(shí)候它將會向左平移（滑動(dòng)）500px的地方。
<div class="step" data-x="500" data-y="0">
This is slide2
</div>第三張幻燈片其data-x值不變，data-y為-400，這將會是從頂部400px處滑入屏幕。
<div class="step" data-x="500" data-y="-400">
This is slide3
</div>第四張幻燈片來個(gè)新花樣，使用data-scale的值控制其縮放大小。data-scale="0.5"表示著它應(yīng)該是一半的尺寸，當(dāng)它變成活動(dòng)的演示時(shí)將通過必需的倍數(shù)調(diào)節(jié)所有幻燈片的縮放尺寸，從這一步絢麗開始起步。
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>第五張幻燈片旋轉(zhuǎn)屬性允許你旋轉(zhuǎn)一個(gè)幻燈片到當(dāng)前視圖，幻燈片5被設(shè)置旋轉(zhuǎn)90度，視覺效果略屌哈。
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>第六張幻燈片開始3D style，可為每個(gè)維度的軸指定旋轉(zhuǎn)屬性(x,y,z)。x軸是橫軸，意思是你可使事物傾斜(正值)或向后(負(fù)值)，y軸是豎軸，所以你可使事物向左搖擺(負(fù)值)或向右(正值)，z軸是縱軸，這將是旋轉(zhuǎn)的東西向上（負(fù)值）和向下（正值）。
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>全局預(yù)覽
個(gè)人超贊這個(gè)視覺體驗(yàn)，把所有的幻燈片都平行的展示，排列的合理會非常帥氣，使用方式就是在幻燈片6后面插入一段html。
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>隨著你幻燈片位置的不同所以全局預(yù)覽的值也會不一樣，拿著結(jié)尾處的demo一點(diǎn)一點(diǎn)調(diào)整找感覺，希望你會喜歡！
完成后請記住它，用它做的不只局限于此，唯一的限制是你的創(chuàng)造力！
總結(jié)
正因?yàn)槲覀兪乔岸?，所以用前端技術(shù)做做各種嘗試沒什么不好，impress.js更可以讓我們的演示文稿更有新意，所以簡單了解下絕對是值得的，學(xué)習(xí)是最好的投資。
優(yōu)點(diǎn)，
- 個(gè)人非常喜歡overview的功能
- 因?yàn)镠TML+CSS都需要自己完成，位置和效果都得自己經(jīng)手，視覺效果都由自己掌控
- 在我用過的同類產(chǎn)品中視覺效果最絢，CSS3+3D效果，直接給觀眾看暈:)
缺點(diǎn)，
- impress在視覺表現(xiàn)上確實(shí)非常強(qiáng)大，比起同樣做演示文稿的
html5slides和deck.js，impress.js的復(fù)雜度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的時(shí)間。- 如果嫌
impress.js麻煩的朋友可以去看看html5slides和deck.js的資料，視覺效果會稍差一些，不過上手會簡單不少
- 如果嫌
- 不要把3D和旋轉(zhuǎn)用得太花哨、太絢，看的人會暈，恰當(dāng)就好。
更多建議：