使用 reveal.js 创建单页演示

html reveal.js
开发日常
Publish Date:   2017-03-07

  1. 获取 reveal.js

    git clone https://github.com/hakimel/reveal.js

  2. 使用官方demo进行修改.

    <!DOCTYPE lang="zh">
<html>
    <head>
        <meta charset="UTF-8" />
        <title>reveal.js demo</title>
        <link rel="stylesheet" href="css/reveal.css" />
        <link rel="stylesheet" href="css/theme/moon.css" id="theme"/>
        <!--[if lt IE 9]>
            <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>
                    <h1>页面1</h1>
                    <p>页面1 的描述</p>
                </section>
            </div>
        </div>
        <script src="lib/js/head.min.js"></script>
        <script src="js/reveal.js"></script>
        <script>
            Reveal.initialize(&#123;&#125;);
        </script>
    </body>
</html>
  • 使用背景
    <section data-background="path/to/svg.svg" data-background-size="960px">
</section>
  • 缩放切入背景
    <section data-background="path/to/img.jpg" data-background-size="460px" data-transition="slide" data-background-transition="zoom">
</section>
  • 点击变淡消失
    <section id="new-flow">
    <p class="fragment fade-out">内容1</p>
    <p>内容</p>
</section>
  • 内嵌iframe
    <section id="flow-chart">
    <iframe data-src="path/to/example.html" width="960" height="730" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen> </iframe>
</section>
  • 代码支持
    <section>
    <h2>标题</h2>
    <pre><code class="hljs" data-trim contenteditable>
    // 代码
    </code></pre>
</section>
  • 支持markdown
    <section data-markdown>
    <script type="text/template">
        ```php
        /**
         * 这是代码
         *
         * @param string code
         * @return string
         */
        function code_something($code) &#123;
            // TODO::something
            return $code;
        &#125;
        ```
    </script>
</section>

参考文档

Author: Itaken
Link: https://itaken.github.io/2017/3/7/reveal.js%E5%88%9B%E5%BB%BA%E6%BC%94%E7%A4%BA%E6%96%87%E6%A1%A3/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Itaken !
html reveal.js
  TOC目录