Impress.js 制作炫酷幻灯片 - 陈斌彬的技术博客

impress.js 是一个在现代浏览器中基于 CSS3 变幻和过渡的展示框架，它的灵感来自 prezi.com。

代码下载

git clone http://git.shiyanlou.com/shiyanlou/impress

HTML 文档

如果使用 impress.js 首先需要建立 HTML5 标准文档，配置基本的 head 和 body 元素，并且引入 impress.js 依赖和静态文件.

<!doctype html>
<html>
    <head>
        <title>Impress.js Demo</title>
        <meta name="viewport" content="width=1024" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/impress-demo.css" rel="stylesheet" /> 
        <link rel="shortcut icon" href="favicon.png" />
        <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    </head>
    <body>
         <script type="text/javascript" src="impress.js"></script>
    </body>
</html>

接着你需要创建包含幻灯片的容器，根据官方文档，创建一个 id 为 ‘'impress’‘ 的 div 标签。

<div id="impress"></div>

在这个 id 是 impress 的 div 中，下级子 div 就是一张幻灯片，请注意它的类是 step：

<div id="impress">
    <div id="yourId" class="step"></div>
</div>

impress 的窗口是父容器，在官方的 Demo 中的 overView，下图是整个 impress 容器的俯视图：

属性

每个幻灯片拥有数据属性，出现在官方 Demo 中的一些数据属性有以下几个：

data-x = 幻灯片的x坐标 data-y = 幻灯片的y坐标 data-scale = 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍 data-rotate = 通过一个数字度数来确定旋转你的幻灯片 data-rotate-x = 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）（环绕X轴旋转） data-rotate-y = 为3D用，这个数字度数是它应该相对y轴旋转多少度。（左摆/右摆）（环绕Y轴旋转） data-rotate-z = 为3D用，这个数字度数是它应该相对z轴旋转多少度。（自转）（环绕Z轴旋转）

上图详细的列出了每张幻灯片的数据属性，你可以对照幻灯片在浏览器中的表现效果来进一步的理解数据属性的设置对它的影响。

幻灯片俯瞰图放映顺序是按照从上到下，从左到右。中间的切换效果是 impress.js 为我们提供的。

依赖和初始化

在官方例子中的最后两行代码：

<script src="js/impress.js"></script>
<script>impress().init();</script>

接着你需要调用 init() 方法初始化 impress.js，确保整个 DOM 文档加载完毕后才开始调用初始化。

impress() 函数提供了下列的 API 来控制幻灯片的展示。尽管调用他们好了：

<script>
    var api = impress();

    api.init();//初始化幻灯片展示
    api.next();//下一张幻灯片，你可以设置鼠标或者键盘来触发它
    api.prev();//上一张幻灯片
    api.goto();//这不是臭名昭著的goto语句，只是根据索引跳转到幻灯片的页码
</script>

简单例子

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <link href="css/impress-demo.css" rel="stylesheet" />
    <style type="text/css">
        q{
            font-weight: 1000;
        }
    </style>
</head>
<body class="impress-not-supported" style="background: url(https://dn-anything-about-doc.qbox.me/impress/psb.jpg) no-repeat center center;">
<div id="impress">
    <div id="bored" class="step" data-x="0" data-y="-0" data-z="0">
        <q>1111111111111111</q>
    </div>
    <div  class="step" data-x="0" data-y="0" data-z="-2000">
        <q>22222222222</q>
    </div>
    <div  class="step" data-x="0" data-y="0" data-z="-4000">
        <q>3333333</q>
    </div>
    <div  class="step" data-x="0" data-y="0" data-z="-6000">
        <q>444444444</q>
    </div>  
    <div class="step" data-x="2000" data-y="0" data-z="-6000" data-rotate="90" data-scale="2">
        <p>5555555</p>
    </div>    
    <div class="step" data-x="2000" data-y="0" data-z="-6500" data-rotate="180" data-scale="2">
        <p>66666</p>
    </div>
    <div class="step" data-x="2000" data-y="0" data-z="-7000" data-rotate="270" data-scale="2">
        <p>7777777</p>
    </div>
    <div class="step" data-x="2000" data-y="0" data-z="-7500" data-rotate="360" data-scale="2">
        <p>8888 </p>
    </div>
    <div class="step" data-x="2000" data-y="0" data-z="-8000" data-rotate="450" data-scale="2">
        <p>99999 </p>
    </div>
    <div class="step" data-x="2000" data-y="0" data-z="-8500" data-rotate="540" data-scale="2">
        <p>aaaa </p>
    </div>
    <div class="step" data-x="2000" data-y="0" data-z="-9000" data-rotate="630" data-scale="2">
        <p>bbbbb </p>
    </div>
    <div class="step" data-x="2000" data-y="0" data-z="-9000" data-rotate="720" data-scale="2">
        <p>cccc </p>
    </div>
    <div class="step" data-x="1000" data-y="0" data-z="-2000" data-rotate="0" data-scale="2">
        <p>ddddd </p>
    </div>
    <div class="step" data-x="2000" data-y="0" data-z="-2000" data-rotate="0" data-scale="2">
        <p>eeeee </p>
    </div>
    <div class="step" data-x="3000" data-y="0" data-z="-2000" data-rotate="0" data-scale="2">
        <p>fffff </p>
    </div> 
    <div class="step" data-x="4000" data-y="0" data-z="-2000" data-rotate="0" data-scale="2">
        <p>ggggg </p> 
    </div>
    <div class="step" data-x="5000" data-y="0" data-z="-2000" data-rotate="0" data-scale="2">
        <p>hhhh  </p>
    </div>
    <div class="step" data-x="4000" data-y="0" data-z="0" data-rotate="0" data-scale="4">
        <p>iiiii </p>
    </div>
    <div class="step" data-x="4000" data-y="0" data-z="0" data-rotate="0" data-rotate-x="-30" data-rotate-y="10" data-scale="5">
        <p>jjjjjjjjjjjj</p>
    </div> 
    <div class="step" data-x="6000" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="00" data-scale="5">
        <p>kkkkk</p>
    </div>                                                                  
</div>
<script>
</script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>