REVEAL.JS–基于CSS3实现的幻灯片工具
jopen
9年前
这是一个基于CSS的3D幻灯片工具。它不依赖任何外部类库,除了已经被包含在发布代码中的 highlight.js。Reveal.JS是Hakim El Hattab开发的一个演示文稿制作工具,能够制作绚丽的演示文稿并生成HTML格式,将它发布到web上。
它使用了CSS3变换功能和JavaScript,这个工具大受web开发者的青睐。支持 Fade、Slide、Convex、Concave、Zoom 等多种效果。
基本用法:
// HTML <div class="reveal"> <div class="slides"> <section>Single Horizontal Slide</section> <section> <section>Vertical Slide 1</section> <section>Vertical Slide 2</section> </section> </div> </div> // JS Reveal.initialize({ dependencies: [ { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'plugin/zoom-js/zoom.js', async: true }, { src: 'plugin/notes/notes.js', async: true }, { src: 'plugin/math/math.js', async: true } ] });