impress.js 中文版学习

从网上的中文版impress.js展示的源代码，后期会看英文的（英语太菜了，看着英文，一脸懵逼，尽量会看英文源码吧。尽量。。。）

研究impress官网的源码时，我会介绍中文版和官网的版的差异。

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

这个东西大概是2011年有人受到彗星撞地球的影响发明出来的，这些信息好难找，我也懒得FQ。

下面是我一遍看源码，一遍学习的笔记，不做任何高端的讲解，（大多是个人理解，js还没学全，），我也在学习中，这个笔记是我放到记事本的。

中文版的统计共14张页数的转换，包括最后一张的总体展示。

第一张:

代码一：

<q>你是否已经<b>厌倦</b>了那些传统的幻灯片形式的表现方式？</q>

</div>

class="step slide"是连接的css样式，就是这个灰底白纸张的样式，具体的可以去style.css

data-x="-1000" data-y="-1500"白纸张在网页上的展示位置，后面会变化，这里是定位

<q>标签就是一句话，字体的大小和样式，感觉是默认的，应该是可以修改的

<b>标签就是加粗

第二张:

代码二：

<q>你是否也认为在<strong>现代浏览器</strong>里，表现形式<strong>不应该</strong>受‘传统’的幻灯片模式的<strong>限制</strong>？</q>

</div>

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

<strong>也是加粗

第三张：

代码三：

<q>你是否希望让你的演讲以<strong>令人震撼</strong>的视觉效果来<strong>打动你的观众</strong>？</q>

</div>

同上

第四张;

代码四;

<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我也没学好。

第五张：

代码五：

是受<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：

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

</div>

额，我没看懂，感觉需要翻一下css，恩，你们翻吧，我懒得看了

第14张：

代码14:

</div>

最后就是总体展示了，也没什么的。感觉如果没什么特殊要求的话，这个js插件还挺简单的。

我收回之前的话，下午在看css的时候，发现了一点问题。是我理解的问题，html是肤浅的，还是用css控制的。

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

最后总结一下吧，这个还是需要实践来掌握的，还有，用html和css来控制展示，是需要话大量时间调整的，做的又不能让看官犯晕，实用性就那样吧，在某些展示的时候比较夺人眼球。