替换reveal.js中的图像

Question

假设我想要连续显示两个非常相似的图像(首先是一张照片,第二张是相同的照片,其中一些区域突出显示).我想避免过渡动画,只是让第二张图像替换第一张图像.这有可能reveal.js吗？

设置data-transition="none"不能很好地工作,因为上一张幻灯片仍保留其动画.

Answer 1

Reveal.js本身没有任何直接的方法来处理所要求的内容.但是,它可以使用div容器和reveal.js 的片段功能来完成.容器包括绝对定位在其中的图像,并且因此必须具有固定尺寸.

下面的html显示第一张图像,下一张幻灯片显示第一张图像.

<section>
<h1>Slide 1</h1>
<div style="position:relative; width:640px; height:480px; margin:0 auto;">
  <img class="fragment" width="640" height="480" src="img1.jpg" style="position:absolute;top:0;left:0;" />
  <img class="fragment" width="640" height="480" src="img2.jpg" style="position:absolute;top:0;left:0;" />
</div>
</section>

当这段html显示第一张图片时,在下一张幻灯片上,第一张图片淡出,第二张图片淡入.

<section>
<h1>Slide 2</h1>
<div style="position:relative; width:640px; height:480px; margin:0 auto;">
  <img class="fragment fade-out" data-fragment-index="0" width="640" height="480" src="img1.jpg" style="position:absolute;top:0;left:0;" />
  <img class="fragment fade-in" data-fragment-index="0" width="640" height="480" src="img2.jpg" style="position:absolute;top:0;left:0;" />
</div>
</section>

Answer 2

Reveal.js 4.0 引入了一个新r-stack类，可以更轻松地将元素堆叠在一起。

<div class="r-stack">
  <img class="fragment" src="https://placekitten.com/450/300" width="450" height="300">
  <img class="fragment" src="https://placekitten.com/300/450" width="300" height="450">
  <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
</div>

上面的示例在图像中淡入彼此叠加。如果您只想一次显示一张图像，则需要使用略有不同的片段设置。

<div class="r-stack">
  <img class="fragment current-visible" src="...">
  <img class="fragment current-visible" src="...">
  <img class="fragment" src="...">
</div>

您可以在 Reveal.js 文档中查看其工作原理的示例https://revealjs.com/layout/#stack

Answer 3

假设您正在使用data-background它来显示照片，那么您需要使用它data-background-transition="none"来达到所需的效果。