一、官方示例

文件构成

impress:

js

impress.js(JavaScript文件,提供特效支持,核心库)

css

impress_demo.css(CSS文件,提供样式支持)

html

index.html(HTML文件,幻灯片入口)

二、HTML说明

头部

html>

impress.js

支持反馈

当浏览器不支持时会显示,可改写错误信息的内容。

你的浏览器不支持  impress.js

你可以下载 Chrome 浏览器

幻灯片区域

创建id为impress的div,文稿放在此div内:

操作提示分别用于在电脑和移动设备上提示用户怎么控制幻灯片:

Use a spacebar or arrow keys to navigate

if (“ontouchstart” in document.documentElement) {

document.querySelector(“.hint”).innerHTML = “

Tap on the left or right to navigate

”;

}

初始化 impress

声明对impress.js的引用,并且初始化impress.js。

impress().init();

最后关闭标签:

三、创建幻灯

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!”。

Hello, World!

第二个div创建了一个透明的幻灯片,位置在第一张幻灯片的右上方,绕z轴旋转90度。

Hello, You!

第三个div创建了一个透明的幻灯片,位置在第二张下方。

Hello, Boy!

第四个div创建了一个透明的幻灯片,位置在第三张绕y轴旋转90度的地方,2倍大小。

Hello!

全览

四、进阶媒体

和 标签插入音视频,控制方式有三种:

controls

显示视频控制条

loop

自动播放,循环播放

autoplay

自动播放

设置自动播放

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。

多个视频或音频

varvideo1 = document.getElementById(“video-1”);

varvideo2 = document.getElementById(“video-2”);

进入幻灯片时执行的函数变更为

videoStep.addEventListener(“impress:stepenter”,function(){

video1.play();

video2.play();

}, false);