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^*</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来控制展示，是需要话大量时间调整的，做的又不能让看官犯晕，实用性就那样吧，在某些展示的时候比较夺人眼球。