impress.js是一个很有趣的用来替代PPT的展示用的js工具，它的灵感来自prezi

如果你要学习使用它，这里有很好的

---

使用它的第一步，下载 ,引入到你的代码里，并执行impress().init();

或者你可以直接写下面的代码,这部分代码最好放在</body>前面

然后记得给body加上class="impress-not-supported",也就默认浏览器不支持如果浏览器支持，这个class会被去除的。

接下来，在body里面放置一个id="impress"的容器，我这里就用div了

下一步，在id="impress"的容器里放置class="step"的容器，我这里还是用div,每一个class="step"的容器，就代表了一页幻灯片。这样的容易可以有下面这样的属性

属性名称	属性说明
data-x	幻灯片中心距离浏览器中心的x方向的像素值
data-y	幻灯片中心距离浏览器中心的y方向的像素值
data-z	幻灯片的深度，距离你的距离
data-scale	通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
data-rotate	通过一个数字度数来确定旋转你的幻灯片
data-rotate-x	为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）
data-rotate-y	为3D用，这个数字度数是它应该相对y轴旋转多少度。 （左摆/右摆）
data-rotate-z	为3D用，这个数字度数是它应该相对z轴旋转多少度。跟data-rotate相同

这些属性，前面的都好理解，后面三个我是这么理解的，比如下面代码应该表示如图

    
                 第五页幻灯片        
    

当然也可以加上当浏览器不支持时的提示信息

    
        
     
浏览器太low了，请换个逼格高点的，最次也得欧朋火狐什么的
    
    

再在css定义样式

.fallback-message{    display:none;}#impress-not-supported > .fallback-message{    display:block;}

至此impress就算掌握了，下面就看创造力了，下面是我的实例代码

    
        
            
    
        
     
浏览器太low了，请换个逼格高点的，最次也得欧朋火狐什么的
    
    
       
    
            
     
                  第八页幻灯片        
     
            
     
                  第一页幻灯片        
     
                
     
                  第二页幻灯片        
     
                
     
                  第三页幻灯片        
     
                
     
                  第四页幻灯片        
     
                
     
                  第五页幻灯片        
     
                
     
                  第六页幻灯片        
     
                
     
                  第七页幻灯片