一、官方示例
文件构成
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);