您现在的位置:

建站资源下载详情

现代浏览器演示框架impress.js

来源：易助科技网浏览量：8收藏

简介

impress.js是一个令人惊叹的现代浏览器演示框架。基于CSS3转换和转换。它不依赖于任何外部样式表。它添加了演示工作所需的所有样式。

（下载的附件中附有DEMO）

使用

1. 引入文件

<script src="js/impress.js"></script>

2. HTML相关设置

1）设置Body元素

Body元素由impress.js用来设置一些有用的类名，这将允许您在CSS或其他脚本中检测演示文稿的支持和状态。

第一个非常有用的类名是“impression not supported”。这个类意味着，浏览器不支持impress.js所需的功能，所以您应该在CSS中应用一些回退样式。没有必要在这个元素上手动添加它。如果脚本检测到浏览器不够好，它将添加此类，但将其保留在HTML中意味着没有JavaScript的用户也将获得回退样式。

当impress.js脚本检测到浏览器支持所有必需的功能时，该类名将被删除。

body元素上的类名也取决于当前活动的表示步骤。有关它的更多细节可以在稍后描述“hint”元素时找到。

<body class="impress-not-supported">

2）包装器设置

现在，这是impress.js使用的核心元素。它是演示步骤的包装器。在这个元素中，所有的impress.js魔法都发生了。它不必是“＜div＞”。只有“id”在这里很重要，因为脚本就是这样找到它的。

要更改幻灯片之间转换的持续时间，请使用“数据转换持续时间=“2000””，使其具有毫秒数。默认值为1000（1s）。

在编写impress.js演示文稿时，您应该针对一些屏幕大小，您可以在此处定义。默认值为1024 x 768。你应该写你的CSS，就好像这是用于演示的屏幕大小一样。当您在不同大小的屏幕（或浏览器窗口）上展示演示文稿时，impress.js会自动缩放演示文稿以适应屏幕。这种缩放的最小和最大限制也可以在这里定义。

您还可以使用`data perspective=“500”`控制透视图，使其具有多个像素。默认值为1000。如果不需要任何3D效果，可以将其设置为0。如果您愿意更改此值，请确保您了解CSS透视图的工作原理：https://developer.mozilla.org/en/CSS/perspective

<div id="impress"
  data-transition-duration="1000"
  data-width="1024"
  data-height="768"
  data-max-scale="3"
  data-min-scale="0"
  data-perspective="1000"
  data-autoplay="7">
  ... steps here ..
</div>

3）定义步骤

演示的每个步骤都应该是“#impression”中的一个元素，类名为“step”。这些步骤元素由impress.js定位、旋转和缩放，“相机”会在演示的每个步骤上显示它们。

定位信息通过数据属性传递。

在下面的示例中，我们只指定具有`data-x=“-1000”`和`data-y=“-1500”`属性的step元素的x和y位置。这意味着**元素的中心**（是的，中心）将位于演示“画布”的点x=-1000px和y=-1500px。

它不会被旋转或缩放。

<div id="bored" class="step slide" data-x="-1000" data-y="-1500" data-autoplay="10">
  <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>

4）示例

这是正在缩放的阶梯元素的示例。同样，我们使用了一个“data-”属性，这次是“data-scale=“4””，所以这意味着这个元素将比其他元素大4倍。从演示和转换的角度来看，这意味着它必须缩小（4倍）才能恢复到正确的大小。

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span class="try">then you should try</span>
  <h1>impress.js<sup>*</sup></h1>
  <span class="footnote"><sup>*</sup> no rhyme intended</span>
</div>

5）旋转设置

此元素引入旋转。符号不应该是一个惊喜。我们使用`data rotate=“90”`属性，这意味着这个元素应该顺时针旋转90度。

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>It’s a <strong>presentation tool</strong> <br/>
  inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
  and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
</div>

<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
  <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
</div>

6）data-z 属性设置

除了“data-x”和“data-y”，您还可以用“data-Z”定义第三（Z）轴上的位置。在下面的例子中，我们使用了`data-z=“-3000”`，这意味着元素的位置应该远离我们（3000px）。

<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
  <p>and <b>tiny</b> ideas</p>
</div>

7）绕轴旋转

您不仅可以在三维中定位元素，还可以围绕任何轴旋转它。所以这个会绕X轴旋转-40度（逆时针40度），绕Y轴旋转10度（顺时针）。当然，你可以用“数据旋转Z”绕Z轴旋转它——它的效果与“数据旋转”完全相同（这两个基本上是别名）。

<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
  <p>and <b>tiny</b> ideas</p>
</div>

8）UI插件

这是一个UI插件。您可以在src/plugins/README.md中阅读更多关于插件的信息。

<div id="impress-toolbar"></div>

2. 调用

1）初始化

要使上述内容真正发挥作用，您需要在页面中包含impress.js。您还需要调用一个`impass（）.init（）`函数来初始化impress.js演示。

<script>impress().init();</script>

2）调用

“impass（）”函数还允许您访问控制演示文稿的API。

// initializes the presentation,
api.init();

// moves to next step of the presentation
api.next();

// moves to previous step of the presentation
api.prev();

// moves the presentation to the step given by its index number
api.goto(stepIndex | stepElementId | stepElement, [duration]);