Question

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

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

此外，是否有一种方法可以在现有图像的顶部覆盖hte按钮。

由于

妮可

Answer 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")

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

1 个答案: