impress.js 使用教程

一、官方示例

项目地址：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 id=“overview” class=“step” data-x=“3000” data-y=“1500” data-scale=“10”>
</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);

本文链接地址: impress.js 使用教程

一、官方示例

二、HTML说明

三、创建幻灯

四、进阶媒体

发表回复 取消回复

发表回复取消回复