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 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 使用教程

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
请输入有效评论哦,肆意灌水或者乱打评论是不会通过的,会影响您评论后获得资源哦~~
提交
头像

昵称

取消
昵称表情

    暂无评论内容