impress.js 中文版 学习
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<sup>*</sup></h1>
? ? ? ? <span class="footnote"><sup>*</sup> no rhyme intended</span>
? ? </div>
?id="title" class="step" 樣式，id應該綁定了什么
data-x="0" data-y="0"坐標定位
data-scale：幻燈片顯示的縮放比例
<span>是段落，換行
<sup> 標簽可定義上標文本。
包含在 <sup> 標簽和其結束標簽 </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效果的<sup>*</sup></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 中文版 学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ANSYS FLUENT非结构体网格数值
- 下一篇： SDcms后台拿webshell