impress.js 中文版 學習

從網上的中文版impress.js展示的源代碼，后期會看英文的（英語太菜了，看著英文，一臉懵逼，盡量會看英文源碼吧。盡量。。。）

研究impress官網的源碼時，我會介紹中文版和官網的版的差異。

impress.js 是一個Javascript程序包，它的功能是讓你制作出令人眩目的內容展示效果，主要里利用了CSS 3D Transforms 里的旋轉，扭曲，縮放等特性。（來自百度）簡言之，代替ppt，但是，，，

這個東西大概是2011年有人受到彗星撞地球的影響發明出來的，這些信息好難找，我也懶得FQ。

下面是我一遍看源碼，一遍學習的筆記，不做任何高端的講解，（大多是個人理解，js還沒學全，），我也在學習中，這個筆記是我放到記事本的。

中文版的統計共14張頁數的轉換，包括最后一張的總體展示。

第一張:

?

?

?

代碼一：

?<div class="step slide" data-x="-1000" data-y="-1500">

? ? ? ? <q>你是否已經<b>厭倦</b>了那些傳統的幻燈片形式的表現方式？</q>

? ? </div>

?class="step slide"是連接的css樣式，就是這個灰底白紙張的樣式，具體的可以去style.css

?data-x="-1000" data-y="-1500"白紙張在網頁上的展示位置，后面會變化，這里是定位

<q>標簽就是一句話，字體的大小和樣式，感覺是默認的，應該是可以修改的

<b>標簽就是加粗

?

第二張:

?

?

代碼二：

?<div class="step slide" data-x="0" data-y="-1500">

? ? ? ? <q>你是否也認為在<strong>現代瀏覽器</strong>里，表現形式<strong>不應該</strong>受‘傳統’的幻燈片模式的<strong>限制</strong>？</q>

? ? </div>

data-x="0" data-y="-1500" 按空格切換到下一張，向右平移了1000，單位是什么不太清楚，大概是px

<strong>也是加粗

?

第三張：

?

代碼三：

<div class="step slide" data-x="1000" data-y="-1500">

? ? ? ? <q>你是否希望讓你的演講以<strong>令人震撼</strong>的視覺效果來<strong>打動你的觀眾</strong>？</q>

? ? </div>

同上

?

第四張;

?

?

代碼四;

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">

? ? ? ? <span class="try">那么，你應該試一試</span>

? ? ? ? <h1>impress.js^*</h1>

? ? ? ? <span class="footnote">^* no rhyme intended</span>

? ? </div>

?id="title" class="step" 樣式，id應該綁定了什么

data-x="0" data-y="0"坐標定位

data-scale：幻燈片顯示的縮放比例

<span>是段落，換行

<sup> 標簽可定義上標文本。

包含在 ^{標簽和其結束標簽} 中的內容將會以當前文本流中字符高度的一半來顯示，但是與當前文本流中文字的字體和字號都是一樣的。

<sub>也是的，上下標，我感覺html我也沒學好。

?

第五張：

?

?

代碼五：

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">

? ? ? ? <p>它是一個<strong>展現工具</strong> <br>

? ? ? ? 是受<a href="http://prezi.com/">prezi.com</a>的啟發 <br>

? ? ? ? 使用了現代瀏覽器里支持的<strong>CSS3 transforms 和 transitions</strong>功能。</p>

? ? </div>

• data-x：幻燈片的X坐標

• data-y：幻燈片的Y坐標

• data-scale：幻燈片顯示的縮放比例

• data-rotate：幻燈片旋轉的度數

• data-rotate-x：為3D使用，這個度數設置它相對X軸旋轉多少度。

• data-rotate-y：為3D使用，這個度數設置它相對Y軸旋轉多少度。

• data-rotate-z：為3D使用，這個度數設置它性對Z軸旋轉多少度。

這個百度出來，好像沒什么好說的了，恩，下面不說了，說最后兩張吧

第13張：

?

?

代碼13：

<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">

? ? ? ? <p><span class="have">是否</span><span class="you">你</span><span class="noticed">注意到</span><span class="its">它是</span> <span class="in">有</span> <b>3D效果的^*</b>?</p>

? ? ? ? <span class="footnote">* beat that, prezi ;)</span>

? ? </div>

額，我沒看懂，感覺需要翻一下css，恩，你們翻吧，我懶得看了

?

第14張：

?

?

?

代碼14:

<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">

? ? </div>

最后就是總體展示了，也沒什么的。感覺如果沒什么特殊要求的話，這個js插件還挺簡單的。?

我收回之前的話，下午在看css的時候，發現了一點問題。是我理解的問題，html是膚淺的，還是用css控制的。

看了看英文版的，貌似更好。

最后總結一下吧，這個還是需要實踐來掌握的，還有，用html和css來控制展示，是需要話大量時間調整的，做的又不能讓看官犯暈，實用性就那樣吧，在某些展示的時候比較奪人眼球。

總結

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

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