Skip to content
/ webppt Public

🐰 轻量级的web 演示 ppt 框架,正在进行中

Notifications You must be signed in to change notification settings

lduoduo/webppt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🐰 webppt 演示框架

致力于打造一款轻量级web演示ppt框架(单页应用)

在线demo

起步

2017-08-11 by duoduo

目标核心功能

  1. markdown 转html
  2. 转场动画
  3. 做笔记、画图
  4. 兼容移动端
  5. 源码地址

已实现功能

  • - markdown转html
  • - 转场动画
  • - 绘图模式
  • - 全景模式
  • - 图片全屏展示
  • - 浏览器全屏
  • - 进度条更新
  • - touch端切换ppt
  • - touch端全景预览
  • - touch端开启debug日志

运行效果

目录结构 - 工具说明

  • webpack3 打包目录
  • ppt.js源文件目录wp-ppt
  • demo源文件wp-demo
  • 新ppt工程请在上面的目录下新建文件夹,存放业务js / scss / less
  • 具体目录说明如下
webppt
├── readme.md
├── package.json
├── .gitignore
└── wp
    └── wp.dev.js // build demo
    └── wp.sdk.js // build ppt.js / ppt.css
    └── utils.js // tools
    └── src
        └── app // demo folder
            └── demo 
        └── img // images
        └── lib // source code of ppt.js
        └── index.html // home page

开发步骤

  1. 引入脚本 ppt.js, 样式 ppt.css
  2. 按照下面的流程引入标签
  3. 静态文件托管服务: node server.js
  4. 开发命令
npm run dev
// 开启demo编译
npm run sdk
// 开启开发模式ppt.js编译
npm run sdk-build
// 开启生产模式ppt.js编译

引用标签详解

  1. html里body需要加上类名ppt

  2. 普通新幻灯片需要如下包裹头

// html
<div class="page">
    <section>
        <h1>用于首页的大写标题</h1>
        <h2>用于每张ppt的幻灯片标题</h2>
        <h3>副标题</h3>
        。。。其他内容
    </section>
</div>

// js 初始化ppt
ppt.init()
// 初始化完毕的回调
ppt.on('ready', () => {
    console.log('ready')
})
// 特殊幻灯片退场、入场后的回调
ppt.onPage('pageid', (e) => {
    console.log('pageid: ' + e)
})
  1. markdown文件插入格式(需要开启webpack编译)
    • npm run dev
// html
<div class="page" name="markdown" data-template="markdown.md" ></div>

// js 嵌入markdown
ppt.markdown({
    'markdown.md': require('./markdown/markdown.md')
})
// js 初始化ppt
ppt.init()

快捷键说明

  • ppt切换: pc -> 左右箭头切换ppt
  • ppt切换: touch -> 左右滑动切换ppt
  • 绘图模式: pc -> 字母b:进入、退出绘图模式
  • 全景预览: pc -> 字母o 、Enter键:进入、退出全景预览模式
  • 全屏: pc -> F11 进入全屏

目前问题

  1. mac chrome转场动画不太友好,浏览器重绘问题
  2. canvas 绘图位置不太准确

About

🐰 轻量级的web 演示 ppt 框架,正在进行中

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published