reveal.js实现html播放ppt的炫酷效果

演示地址： http://meiyouwumai.github.io/reveal/

	
		

		

		
		

		
		

		

		
		

		
		

		
		

		
	

	

		


			
			

				

					
Reveal.js
					
HTML展现ppt效果的框架
					

						Created by Hakim El Hattab / @hakimel
					
				

				

					
概述
					

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

				
				

					

						
垂直幻灯片
						
幻灯片可以相互嵌套
						
用 space 键播放幻灯片 
						

						
							
						
					
					

						
地下1层
						
	嵌套幻灯片可以添加额外的详细信息,下面是有用的高水平下滑 
					
					

						
地下2层
						
现在，是时候往上了
						

						
							
						
					
				

				

					
幻灯片
					

						不是程序员?  没关系，这里有可视化界面编辑的网站 http://slides.com.
					
				

				

					
视图焦点
					

						点击 ESC 可以查看幻灯片的综述
					
					

						按住 Alt 不放，单击鼠标左键到屏幕 这里。
Alt +  单击鼠标左键到屏幕任意位置返回。
					
				

				

					
触摸优化
					

						ppt在触摸设备上看起来效果很好,比如手机和平板电脑。简单的滑动幻灯片。
					
				

				

					
				

				

					

						
Fragments
						
点击下一个箭头...
						
... 下一步 ...
						
... a fragmented slide.

						

							This slide has fragments which are also stepped through in the notes window.
						
					
					

						
Fragment 样式
						
有许多不同样式的 fragments, 比如:
						
grow
						
shrink
						
fade-out
						
current-visible
						
highlight-red
						
highlight-blue
					
				

				

					
过渡样式
					

						你可以选择不同的过渡样式, 比如: 

						None -
						Fade -
						Slide -
						Convex -
						Concave -
						Zoom
					
				

				

					
主题
					

						reveal.js 有如下主题可选: 


Black (default) -
White -
League -
Sky -
Beige -
Simple 

Serif -
Blood -
Night -
Moon -
Solarized

				

				

					

						
背景
						

							设置 data-background="#dddddd" 改变ppt的背景颜色. 所有CSS颜色标签都支持。
						
						
							
						
					
					

						
图片背景
						

					
					

						
平铺的图片背景
						

					
					

						

							
视频背景
							

						
					
					

						
GIF图片背景!
					
				

				

					
背景过渡
					

						可以选择不同的背景过渡，下面这种是 "zoom".
					
					
Reveal.configure({ backgroundTransition: 'zoom' })
				

				

					
背景过渡
					

						你可以给每一页ppt设置不同的背景过渡.
					
					

				

				

					
漂亮的代码样式
					

function linkify( selector ) {
if( supports3DTransforms ) {

var nodes = document.querySelectorAll( selector );

for( var i = 0, len = nodes.length; i < len; i++ ) {
  var node = nodes[i];

  if( !node.className ) {
    node.className += ' roll';
  }
 }
 }
}
					
					
语法高亮的代码highlight.js.
				

				

					
无序列表
					

						
No order here
						
Or here
						
Or here
						
Or here
					
				

				

					
有序列表
					

						
One is smaller than...
						
Two is smaller than...
						
Three!
					
				

				

					
表格
					

						

							

								
物品
								
价格
								
数量
							
						
						

							

								
苹果
								
$1
								
7
							
							

								
柠檬
								
$2
								
18
							
							

								
面包
								
$3
								
2
							
						
					
				

				

					
引用
					

						有两种形式的引用, 内联的: 
						“The nice thing about standards is that there are so many to choose from”
					
和成块的引用:
					

						“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would	reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
					
				

				

					
链接跳转
					

						你可以链接跳转到ppt内部的某一页,
						点击这里.
					
				

				

					
演讲者模式
					
这里有一种演讲者模式. 它包括计时器, 预览即将到来的下一页ppt或者笔记.
					
按住 s 试一试.

					

						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
					
				

				

					
输出pdf
					
可以输出 PDF,下面是例子:
					
				

				

					
全局状态
					

						设置 data-state="something" 在ppt上 "something"
						会在ppt打开的时候作为一个class加到每一个文件元素里.  
					
				

				

					
状态事件
					

					 另外可以触发自定义事件绑定在每张幻灯片的上的 data-state 值.
					
					

Reveal.addEventListener( 'customevent', function() {
	console.log( '"customevent" has fired' );
} );
					
				

				

					
花点时间
					

						点击 B 或者 . 暂停演示. 
					
				

				

					
更多支持
					
						
						
Extensive JavaScript API
						
自动播放
						
Parallax backgrounds
						
自定义键盘绑定
					
				

				

					
结束
					

						- 试试在线编辑器 

						- 源代码 & 文件