Impress.js - 创建按钮以转到不同的位置/步骤答案

【问题标题】：Impress.js - Creating buttons to go to different locations/stepsImpress.js - 创建按钮以转到不同的位置/步骤
【发布时间】：2014-11-20 11:43:02
【问题描述】：

如何在 Impress.js 幻灯片上创建按钮 - 允许我转到演示文稿的其他部分的按钮。

我知道有用于下一步/上一步的代码，但我想去一个完全不同的位置/步骤。

另外，有没有一种方法可以将 hte 按钮覆盖在现有图像之上。

谢谢

妮可

【问题讨论】：

我已经设法嵌入了一个网页，并链接到了演示文稿之外的其他网页，但我无法制作按钮。

标签： impress.js

【解决方案1】：

选项 1：您可以使用普通的 html 链接和锚点。

（注意：在下面的 html 中，我删除了很多内容以使原理尽可能清晰，因此按原样剪切和粘贴可能行不通，但相信我，这个想法确实可行：） )

<div class="step" step="0" data-x="0" data-y="0">
  <h1>This is the first slide</h1>
  <p>Here comes some text.</p>
  <p>Jump to <a href="#LastSlide">Last-Slide</a></p>
</div>

<div class="step" step="1" data-x="1200" data-y="0">
  <h1>This is the second slide</h1>
</div>

<div class="step" step="3" id="LastSlide" data-x="-800" data-y="0" data-z="r2000" data-rotate-y="90">
  <h1>Last Slide</h1>
      <p>How did I get here?</p>
</div>

这里的关键部分是第一张幻灯片中的链接（您可以将其替换为按钮、图像或任何您想要的内容）：<a href="#LastSlide">Last-Slide</a>

然后在目标幻灯片中定义该 ID：<div class="step" step="3" id="LastSlide"... >

注意：跳转到目标幻灯片后，您的历史记录会丢失，即向上翻页会将您带到演示文稿中逻辑上位于目标幻灯片之前的任何幻灯片。因此，如果您想回到原来的位置，请在目标幻灯片中放置其他链接/按钮，或使用浏览器上的“返回”按钮。

选项 2：使用 impress.js api 代替超链接：impress().goto("LastSlide")

【讨论】：