实现html播放ppt的炫酷效果

最新推荐文章于 2024-08-01 17:54:46 发布

baidu_33981482

最新推荐文章于 2024-08-01 17:54:46 发布

阅读量8.7k

点赞数 2

文章标签：效果开源库程序员教程

本文链接：https://blog.csdn.net/baidu_33981482/article/details/80122082

版权

本文介绍了一位国外程序员的开源JS库reveal.js，该库可以实现在HTML中展示炫酷的PPT效果。通过提供的演示地址，读者可以看到实际效果。文章还包含了简单的使用教程，方便开发者参考。

摘要由CSDN通过智能技术生成

首先看一下演示效果：演示地址

是国外程序员的开源js库，我做了一个简单的ppt放在网上，下面是使用教程，原文是英文的，下面是我翻译的哦。reveal.js

复制代码

<!doctype html>  
<html lang="en">  

    <head>  
        <meta charset="utf-8">  

        <title>reveal.js - The HTML Presentation Framework</title>  

        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">  
        <meta name="author" content="Hakim El Hattab">  

        <meta name="apple-mobile-web-app-capable" content="yes" />  
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />  

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">  

        <link rel="stylesheet" href="css/reveal.css">  
        <link rel="stylesheet" href="css/theme/black.css" id="theme">  

        <!-- Code syntax highlighting -->
        <link rel="stylesheet" href="lib/css/zenburn.css">  

        <!-- Printing and PDF exports -->
        <script>  
            var link = document.createElement( 'link' );  
            link.rel = 'stylesheet';  
            link.type = 'text/css';  
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';  
            document.getElementsByTagName( 'head' )[0].appendChild( link );  
        </script>  

        <!--[if lt IE 9]>  
        <script src="lib/js/html5shiv.js"></script>  
        <![endif]-->
    </head>  

    <body>  

        <div class="reveal">  

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">  
                <section>  
                    <h1>Reveal.js</h1>  
                    <h3>HTML展现ppt效果的框架</h3>  
                    <p>  
                        <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>  
                    </p>  
                </section>  

                <section>  
                    <h2>概述</h2>  
                    <p>  
                        reveal.js 能让你用HTML构建漂亮的交互式幻灯片。这个页面将会告诉你怎么做！  

                    </p>  
                </section>  

                <!-- Example of nested vertical slides -->
                <section>  
                    <section>  
                        <h2>垂直幻灯片</h2>  
                        <p>幻灯片可以相互嵌套</p>  
                        <p>用 <em>space</em> 键播放幻灯片 </p>  

                        <a href="#" class="navigate-down">  
                            <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">  
                        </a>  
                    </section>  
                    <section>  
                        <h2>地下1层</h2>  
                        <p>   嵌套幻灯片可以添加额外的详细信息,下面是有用的高水平下滑 </p>  
                    </section>  
                    <section>  
                        <h2>地下2层</h2>  
                        <p>现在，是时候往上了</p>  

                        <a href="#/2">  
                            <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">  
                        </a>  
                    </section>  
                </section>  

                <section>  
                    <h2>幻灯片</h2>  
                    <p>  
                        不是程序员?  没关系，这里有可视化界面编辑的网站 <a href="http://slides.com" target="_blank">http://slides.com</a>.  
                    </p>  
                </section>  

                <section