一、官方示例
项目地址：https://github.com/impress/impress.js
文件构成
impress：
- js
- impress.js（JavaScript文件，提供特效支持，核心库）
- css
- impress_demo.css（CSS文件，提供样式支持）
- html
- index.html（HTML文件，幻灯片入口）
二、HTML说明
头部
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<meta name=“viewport” content=“width=1024” />
<meta name=“apple-mobile-web-app-capable” content=“yes” />
<title>impress.js</title>
<link href=“css/impress-demo.css” rel=“stylesheet” />
<link rel=“apple-touch-icon” href=“apple-touch-icon.png” />
</head>支持反馈
当浏览器不支持时会显示，可改写错误信息的内容。
<body class=“impress-not-supported”>
<div class=“fallback-message”>
<p>你的浏览器不支持 impress.js</p>
<p>你可以下载 Chrome 浏览器</p>
</div>幻灯片区域
创建id为impress的div，文稿放在此div内：
<div id=“impress”>
</div>操作提示分别用于在电脑和移动设备上提示用户怎么控制幻灯片：
<div class=“hint”>
<p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
if (“ontouchstart” in document.documentElement) {
document.querySelector(“.hint”).innerHTML = “<p>Tap on the left or right to navigate</p>”;
}
</script>初始化 impress
声明对impress.js的引用，并且初始化impress.js。
<script src=“js/impress.js”></script>
<script>impress().init();</script>最后关闭标签：
</body>
</html>三、创建幻灯
impress.js 创建了一个三维空间，所有的幻灯片都有各自的位置坐标（x，y，z）。
空间的中心是原点（0，0，0）。
其他的幻灯片或文字都是相对于这个原点来设置位置的。
所有幻灯片都使用一个div：
id（可选）——可以用来表示幻灯片的顺序，格式是id=“step-N”，（比如id=”step-2″，序号为2）。如果不指定id的话，幻灯片按照代码从上往下的顺序出现。
class（必须）——通常有两个值，“step”表示一个步骤，元素透明显示，“step slide”有幻灯片白色方框。
位置属性
data-x——表示x轴坐标
data-y——表示y轴坐标
data-z——表示z轴坐标
常用效果
data-rotate——表示旋转，分别有data-rotate-x，data-rotate-y和data-rotate-z（同data-rotate），值表示旋转的度数。data-scale——表示幻灯片的大小，如data-scale=”4″表示比其他幻灯片大四倍
data-transition-duration——幻灯片切换的时间，默认为1000，单位为ms（1000ms=1s）
data-perspective——表示视角，设为0则取消3D效果。默认为1000。
例子
第一个div创建了一个有白色底框的幻灯片，位置在第四象限，沿x轴顺时针旋转90度。文本是100px大小的“Hello, world!”。
<div class=“step slide” style=“font-size:100px” data-x=“0” data-y=“0”>
<q>Hello, World!</q>
</div>第二个div创建了一个透明的幻灯片，位置在第一张幻灯片的右上方，绕z轴旋转90度。
<div class=“step” data-x=“2000” data-y=“-2000” data-rotate-z=“90”>
<q>Hello, You!</q>
</div>第三个div创建了一个透明的幻灯片，位置在第二张下方。
<div class=“step” data-x=“2000” data-y=“-2000” data-z=“-5000” >
<q>Hello, Boy!</q>
</div>第四个div创建了一个透明的幻灯片，位置在第三张绕y轴旋转90度的地方，2倍大小。
<div class=“step” data-x=“-2000” data-y=“-2000” data-z=“-5000” data-rotate-x=“180” data-scale=“2”>
<q>Hello!</q>
</div>全览
<div class=“step” data-x=“-2000” data-y=“-2000” data-z=“-5000” data-rotate-x=“180” data-scale=“2”>
<q>Hello!</q>
</div>四、进阶媒体
<video>和 <audio>标签插入音视频，控制方式有三种：
| controls | 显示视频控制条 |
| loop | 自动播放，循环播放 |
| autoplay | 自动播放 |
<video width=“320” height=“460” autoplay>
<source src=“video/test.webm” type=video/webm>
</video>设置自动播放
var videoStep = document.getElementById(“video-step”);
var video = document.getElementById(“video”);
videoStep.addEventListener(“impress:stepenter”, function(){
video.play();
}, false);
videoStep.addEventListener(“impress:stepleave”, function(){
video.pause();
}, false);设置幻灯片的id设为video-step，视频的id设为video。
<div id=“video-step” class=“step” data-x=“-50000” data-y=“2000” data-z=“-60000” data-scale=“6”>
<video id=“video” width=“420” height=“340” autoplay>
<source src=“video/IMG_1254.webm” type=“video/webm”>
</video>
</div>多个视频或音频
var video1 = document.getElementById(“video-1”);
var video2 = document.getElementById(“video-2”); 进入幻灯片时执行的函数变更为
videoStep.addEventListener(“impress:stepenter”, function(){
video1.play();
video2.play();
}, false); 演示地址：http://www.195440.com/html/impress/2/2.html
本文转载自: impress.js 使用教程