Reveal.JS

Reveal.js 是应用最新的web技术,来创建漂亮的html演示效果的js库。 reveal.js不依赖其他任何javascript库,是一个独立的javascript插件库。

插入页面

首页

修改以下内容,作为首页ppt

<div class="reveal">
    <div class="slides">
      <!--首页-->
      <section>
           <h1 class="title">Titile</h1>
           <h2 class="author">wuqi</h2>
           <h3 class="date">2016/01/04</h3>
      <section>
    </div>
</div>

HTML语法页面

普通页面,如果懂得html语法的话,可以在title页面后直接添加section即可

<div class="reveal">
    <div class="slides">
      <!--首页-->
      <section>
           <h1 class="title">Titile</h1>
           <h2 class="author">wuqi</h2>
           <h3 class="date">2016/01/04</h3>
      <section>
      <!--第二页-->
      <section>
           <h3>Show Image</h3>
           <img  src="test.png"  alt="test" />
      <section>
    </div>
</div>

markdown语法页面

Markdown是一种轻量级的标记语言,语法简单,可以排出简洁的表现界面,具体语法可以参考:Markdown 简明语法

<div class="reveal">
    <div class="slides">
      <!--首页-->
      <section>
           <h1 class="title">Titile</h1>
           <h2 class="author">wuqi</h2>
           <h3 class="date">2016/01/04</h3>
      <section>
      <!--Markdown页面-->
      <section data-markdown>
        <script type="text/template">
          ## Page title
 
          A paragraph with some text and a [link](http://hakim.se).
        </script>
      </section>
      <section data-markdown>
        <script type="text/template">
              ##量词
              |代码/语法|  说明|
              | --------   | -----  |
              |`*`|  重复零次或更多次|
              |`+`|  重复一次或更多次|
              |`?`|  重复零次或一次|
              |`{n}`|  重复n次|
              |`{n,}`|  重复n次或更多次|
              |`{n,m}`|  重复n到m次|
        </script>
      </section>
    </div>
</div>

纵向翻页页面

<section>中嵌套一层<section>,则内部页面将纵向翻页:

        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>

页面效果

翻页效果

修改section的data-transition属性,可以修改翻页效果,修改data-transition-speed属性可以调整翻页速度

<section data-transition="slide">
    The train goes on … 
</section>
<section data-transition="slide"> 
    and on … 
</section>
<section data-transition="slide-in fade-out"> 
    and stops.
</section>
<section data-transition="fade-in slide-out"> 
    (Passengers entering and leaving)
</section>
<section data-transition="slide">
    And it starts again.
</section>

data-transition属性可以设置进入和退出效果,可以设置的效果包括:

none fade slide convex concave zoom

背景

修改section的data-background属性,可以修改页面背景,背景可以为纯色、图片、视频、网页等

<section data-background="#ff0000">
    <h2>All CSS color formats are supported, like rgba() or hsl().</h2>
</section>
<section data-background="http://example.com/image.png">
    <h2>This slide will have a full-size background image.</h2>
</section>
<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
    <h2>This background image will be sized to 100px and repeated.</h2>
</section>
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop>
    <h2>Video. Multiple sources can be defined using a comma separated list. Video will loop when the data-background-video-loop attribute is provided.</h2>
</section>
<section data-background-iframe="https://slides.com">
    <h2>Embeds a web page as a background. Note that the page won't be interactive.</h2>
</section>

页内效果

逐行效果

在markdown页内添加<!– .element: class=“fragment” data-fragment-index=“1” –>

或者在html页面修改class和data-fragment-index属性

data-fragment-index为点几下显示效果,class中可以添加效果,默认为显示,可以高亮,放大,缩小

          <!--markdown页面-->
          <section data-markdown>
            <script type="text/template">
              ##搜索技巧
 
               - Google示例:
                 - c++如何计算稀疏矩阵乘法:约 31,100 条结果 <!-- .element: class="fragment grow" data-fragment-index="1" -->
                 - c++  稀疏矩阵 乘:约 48,800 条结果 <!-- .element: class="fragment highlight-red" data-fragment-index="2" -->
                 - c++  稀疏矩阵  库:约 63,400 条结果 <!-- .element: class="fragment" data-fragment-index="3" -->
                 - c++ Sparse matrix multiplication:约 94,700 条结果 <!-- .element: class="fragment" data-fragment-index="4" -->
                 - c++ sparse matrix library:约 203,000 条结果 <!-- .element: class="fragment" data-fragment-index="5" -->
            </script>
          </section>
          <!--html页面-->
          <section>
            <p class="fragment" data-fragment-index="3">Appears last</p>
            <p class="fragment" data-fragment-index="1">Appears first</p>
            <p class="fragment" data-fragment-index="2">Appears second</p>
          </section>
          <!--页面效果-->
          <section>
            <p class="fragment grow">grow</p>
            <p class="fragment shrink">shrink</p>
            <p class="fragment fade-out">fade-out</p>
            <p class="fragment current-visible">visible only once</p>
            <p class="fragment highlight-current-blue">blue only once</p>
            <p class="fragment highlight-red">highlight-red</p>
            <p class="fragment highlight-green">highlight-green</p>
            <p class="fragment highlight-blue">highlight-blue</p>
          </section>

插入代码

reveal.js默认带有highlight.js,将自动识别代码,直接按如下格式添加代码即可高亮

  <section>
      <pre><code data-trim>
  (def lazy-fib
    (concat
     [0 1]
     ((fn rfib [a b]
          (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
      </code></pre>
  </section>

插入公式

添加 katex plugin,按照说明文档,添加公式