标签：
几天前遇到一个制作3D幻灯片效果的插件，试着用到自己的在线简历页面中，展示效果蛮好的。不过查阅了很多文档，几乎都是英文，于是想着整理一下写一篇博客当总结。
准备工作：
1、首先当然是下载相应reveal的资源，下载链接：https://github.com/hakimel/reveal.js
2、将相应的文件夹（css、is、lib、plugin）引入到自己的工作目录，目录层次如下：（忽略我的imgs文件夹~~）
下面就可以着手写自己的页面啦~
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Reveal.js 3 Slide Demo</title> <link rel="stylesheet" href="css/reveal.min.css"> <link rel="stylesheet" href="css/theme/default.css" id="theme"> <!--Add support for earlier versions of Internet Explorer --> <!--[if lt IE 9]> <script src="lib/js/html5shiv.js"></script> <![endif]--> </head> <body> </body> </html>
上面link进来两个css文件~读者自己根据自己的文件名进行引入~为了兼容ie9~需要按条件引入html5shiv.js
body中代码框架如下：
<body> <!-- Wrap the entire slide show in a div using the "reveal" class. --> <div class="reveal"> <!-- Wrap all slides in a single "slides" class --> <div class="slides"> <!-- Each section element contains an individual slide --> <section> <h1>About My Product</h1> <p>My product discussed here</p> </section> </div> </div> </body>
外面两层div是固定的~写上对应的样式类~然后就可以在里面填充你所想要展示的内容啦。
使用上你可以在一个reveal样式类的div中书写你需要的所有slides容器~每个容器相当于一页的内容~在slides中填充那页的内容就好了~之后点击右下角的按钮~各个slides页面就会进行切换啦。
当然你也可以为每一个slides都包裹一个reveal的div~
写完body后需要引入两个js文件~这样插件的效果才会出来~当然~你可以在任何地方引入这两个文件~只是为了提高页面的显示速度~可以将这两个js文件放到页面内容之后~这样网页在显示时可以先显示出内容~网页样式可以稍后渲染
<script src="lib/js/head.min.js"></script> <script src="js/reveal.min.js"></script>
引入上面两个js文件后我们要调用相应的函数进行初始化
<script> // Required, even if empty. Reveal.initialize({ }); </script>
这样一个最基本的页面就出来啦~
如果想要页面支持按空格进行切换~就使用下面的语句进行初始化吧
<script> // Required, even if empty. Reveal.initialize({ controls: false }); </script>
initialize函数还有很多写法~对应着各种不同的效果~读者可以自己研究~这里只给出reveal.js最基础的使用~
更加详细的内容可以参考这个链接：http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/
个人也用reveal写了一个在线的简历~有兴趣的读者可以参考一下：http://x-shadow-x.github.io/resume/
标签：
原文地址：http://www.cnblogs.com/Liujunyan/p/4948525.html
