幾天前遇到一個制作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/