介绍两个制作HTML-PPT的插件

kailian 2014-08-09

这两个都没有可视化编辑，需要会基本前端知识才能使用

只是介绍，没有教程

fullPage.js

下载

简单示例，详细见github项目介绍

  1. <div class="section" id="firstPage">第一屏内容</div>
  2. <div class="section" id="secondPage">第二屏内容</div>
  3. <div class="section" id="3rdPage">第三屏内容</div>
  5. $(document).ready(function() {
  6. 	$('#fullpage').fullpage({
  7. 		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
  8. 		anchors: ['firstPage', 'secondPage', '3rdPage'],
  9. 		menu: '#menu',
  10. 		loopTop: true,
  11. 		loopBottom: true
  12. 	});
  13. });

impress.js

下载

支持3D特效转换，3D效果很赞

2013-04-20做的一个html5PPT，DEMO

虽然不支持可视化编辑，但是找到了node的markdown-impress神器

使用示例：

  1. 新建markdown-impress目录
  2. cd markdown-impress
  3. npm install markdown-impress
  4. 复制README.md修改为file.md到markdown-impress目录
  5. 新建index.js
  6. 复制下面进去
  7. var fs = require('fs');
  8. var mtoi = require('markdown-impress');
  9. var content = mtoi('file.md');
  10. fs.writeFileSync('file.html', content);
  12. 执行node index.js
  13. 目录下生成file.html
html51 web64