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.
						
        					
       
					
       
						
        
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 试一试.
					
       				
      
				
      
					
       
输出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
						
        
自定义键盘绑定
					
       
				
      
				
      
					
       
结束
					
       
						- 试试在线编辑器 
						- 源代码 & 文件