impress.js 中文版 学习
impress.js 中文版 學(xué)習(xí)
從網(wǎng)上的中文版impress.js展示的源代碼，后期會(huì)看英文的（英語(yǔ)太菜了，看著英文，一臉懵逼，盡量會(huì)看英文源碼吧。盡量。。。）
研究impress官網(wǎng)的源碼時(shí)，我會(huì)介紹中文版和官網(wǎng)的版的差異。
impress.js 是一個(gè)Javascript程序包，它的功能是讓你制作出令人眩目的內(nèi)容展示效果，主要里利用了CSS 3D Transforms 里的旋轉(zhuǎn)，扭曲，縮放等特性。（來(lái)自百度）簡(jiǎn)言之，代替ppt，但是，，，
這個(gè)東西大概是2011年有人受到彗星撞地球的影響發(fā)明出來(lái)的，這些信息好難找，我也懶得FQ。
下面是我一遍看源碼，一遍學(xué)習(xí)的筆記，不做任何高端的講解，（大多是個(gè)人理解，js還沒(méi)學(xué)全，），我也在學(xué)習(xí)中，這個(gè)筆記是我放到記事本的。
中文版的統(tǒng)計(jì)共14張頁(yè)數(shù)的轉(zhuǎn)換，包括最后一張的總體展示。
第一張:
?
?
?
代碼一：
?<div class="step slide" data-x="-1000" data-y="-1500">
? ? ? ? <q>你是否已經(jīng)<b>厭倦</b>了那些傳統(tǒng)的幻燈片形式的表現(xiàn)方式？</q>
? ? </div>
?class="step slide"是連接的css樣式，就是這個(gè)灰底白紙張的樣式，具體的可以去style.css
?data-x="-1000" data-y="-1500"白紙張?jiān)诰W(wǎng)頁(yè)上的展示位置，后面會(huì)變化，這里是定位
<q>標(biāo)簽就是一句話，字體的大小和樣式，感覺(jué)是默認(rèn)的，應(yīng)該是可以修改的
<b>標(biāo)簽就是加粗
?
第二張:
?
?
代碼二：
?<div class="step slide" data-x="0" data-y="-1500">
? ? ? ? <q>你是否也認(rèn)為在<strong>現(xiàn)代瀏覽器</strong>里，表現(xiàn)形式<strong>不應(yīng)該</strong>受‘傳統(tǒng)’的幻燈片模式的<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>的視覺(jué)效果來(lái)<strong>打動(dòng)你的觀眾</strong>？</q>
? ? </div>
同上
?
第四張;
?
?
代碼四;
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
? ? ? ? <span class="try">那么，你應(yīng)該試一試</span>
? ? ? ? <h1>impress.js<sup>*</sup></h1>
? ? ? ? <span class="footnote"><sup>*</sup> no rhyme intended</span>
? ? </div>
?id="title" class="step" 樣式，id應(yīng)該綁定了什么
data-x="0" data-y="0"坐標(biāo)定位
data-scale：幻燈片顯示的縮放比例
<span>是段落，換行
<sup> 標(biāo)簽可定義上標(biāo)文本。
包含在 <sup> 標(biāo)簽和其結(jié)束標(biāo)簽 </sup> 中的內(nèi)容將會(huì)以當(dāng)前文本流中字符高度的一半來(lái)顯示，但是與當(dāng)前文本流中文字的字體和字號(hào)都是一樣的。
<sub>也是的，上下標(biāo)，我感覺(jué)html我也沒(méi)學(xué)好。
?
第五張：
?
?
代碼五：
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
? ? ? ? <p>它是一個(gè)<strong>展現(xiàn)工具</strong> <br>
? ? ? ? 是受<a href="http://prezi.com/">prezi.com</a>的啟發(fā) <br>
? ? ? ? 使用了現(xiàn)代瀏覽器里支持的<strong>CSS3 transforms 和 transitions</strong>功能。</p>
? ? </div>
data-x：幻燈片的X坐標(biāo)
data-y：幻燈片的Y坐標(biāo)
data-scale：幻燈片顯示的縮放比例
data-rotate：幻燈片旋轉(zhuǎn)的度數(shù)
data-rotate-x：為3D使用，這個(gè)度數(shù)設(shè)置它相對(duì)X軸旋轉(zhuǎn)多少度。
data-rotate-y：為3D使用，這個(gè)度數(shù)設(shè)置它相對(duì)Y軸旋轉(zhuǎn)多少度。
data-rotate-z：為3D使用，這個(gè)度數(shù)設(shè)置它性對(duì)Z軸旋轉(zhuǎn)多少度。
這個(gè)百度出來(lái)，好像沒(méi)什么好說(shuō)的了，恩，下面不說(shuō)了，說(shuō)最后兩張吧
第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>
額，我沒(méi)看懂，感覺(jué)需要翻一下css，恩，你們翻吧，我懶得看了
?
第14張：
?
?
?
代碼14:
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
? ? </div>
最后就是總體展示了，也沒(méi)什么的。感覺(jué)如果沒(méi)什么特殊要求的話，這個(gè)js插件還挺簡(jiǎn)單的。?
我收回之前的話，下午在看css的時(shí)候，發(fā)現(xiàn)了一點(diǎn)問(wèn)題。是我理解的問(wèn)題，html是膚淺的，還是用css控制的。
看了看英文版的，貌似更好。
最后總結(jié)一下吧，這個(gè)還是需要實(shí)踐來(lái)掌握的，還有，用html和css來(lái)控制展示，是需要話大量時(shí)間調(diào)整的，做的又不能讓看官犯暈，實(shí)用性就那樣吧，在某些展示的時(shí)候比較奪人眼球。
總結(jié)
以上是生活随笔為你收集整理的impress.js 中文版 学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ANSYS FLUENT非结构体网格数值
- 下一篇： Javascript手把手教你做商品放大