🎨 webppt

一个基于 h5 + css3 + JavaScript 的开源在线演示文稿（幻灯片）框架，可以帮助用户使用web浏览器搭建一个漂亮的网页版PPT。

在线体验地址：https://qinyongcheng.github.io/webppt/

🚀 使用

一、HTML中使用

(一)安装

1.通过cdn安装（推荐）

<link rel="stylesheet" type="text/css" href="https://unpkg.com/webppt@1.0.11/dist/style.css" />
<script src="https://unpkg.com/webppt@1.0.11/dist/index.min.js"></script>

2.直接下载安装

css下载

js下载">

(二)编写PPT

（1）最简单PPT

    <style>body {background-color: aliceblue;}.page {color: #333;background-color: lightpink;}</style><div class="webppt-wrap"><div class="page">第1页</div><div class="page">第2页</div><div class="page">第3页</div></div><script>Webppt.start()</script>

（2）PPT页子幻灯片

每一页PPT下可以加多张子幻灯片。

    <style>body {background-color: aliceblue;}.page {color: #333;background-color: lightpink;}</style><div class="webppt-wrap"><div class="page"><div class="slide"><p>第1页第1张</p></div><div class="slide"><p>第1页第2张</p></div></div><div class="page">第2页</div><div class="page">第3页</div></div><script>Webppt.start()</script>

（3）设置PPT转场动画

默认PPT转场为随机动画，可通过幻灯片的data-animation属性设置转场动画。 注意：如果页下面有多个子幻灯片时，第1个子幻灯片动画设置无效，其使用当前页设置的动画效果，如果当前页未设置动画属性，则默认随机动画

    <style>body {background-color: aliceblue;}.page {color: #333;background-color: lightpink;}.slide{background-color: coral;}</style><div class="webppt-wrap"><div class="page" data-animation="1"><div class="slide"><p>第1页第1张，转场效果在父标签的data-animation属性设置</p></div><div class="slide" data-animation="66"><p>第1页第2张，转场效果在本class="slide"标签的data-animation属性设置</p></div><div class="slide" data-animation="67"><p>第1页第3张</p></div></div><div class="page">第2页</div><div class="page">第3页</div></div><script>Webppt.start()</script>

内置转场动画如下表（动画样式类由out出场和in入场样式类组成）：

动画名称

动画值

动画样式类

向左推移

1

outClass: 'pt-page-moveToLeft',inClass: 'pt-page-moveFromRight'

向右推移

2

outClass: 'pt-page-moveToRight',inClass: 'pt-page-moveFromLeft'

向上推移

3

outClass: 'pt-page-moveToTop',inClass: 'pt-page-moveFromBottom'

向下推移

4

outClass: 'pt-page-moveToBottom',inClass: 'pt-page-moveFromTop'

向左谈出

5

outClass: 'pt-page-fade',inClass: 'pt-page-moveFromRight pt-page-ontop'

向右淡出

6

outClass: 'pt-page-fade',inClass: 'pt-page-moveFromLeft pt-page-ontop'

向上淡出

7

outClass: 'pt-page-fade',inClass: 'pt-page-moveFromBottom pt-page-ontop'

向下淡出

8

outClass: 'pt-page-fade',inClass: 'pt-page-moveFromTop pt-page-ontop'

左推移淡出

9

outClass: 'pt-page-moveToLeftFade',inClass: 'pt-page-moveFromRightFade'

右推移淡出

10

outClass: 'pt-page-moveToRightFade',inClass: 'pt-page-moveFromLeftFade'

上推移淡出

11

outClass: 'pt-page-moveToTopFade',inClass: 'pt-page-moveFromBottomFade'

下推移淡出

12

outClass: 'pt-page-moveToBottomFade',inClass: 'pt-page-moveFromTopFade'

向左缓动

13

outClass: 'pt-page-moveToLeftEasing pt-page-ontop',inClass: 'pt-page-moveFromRight'

向右缓动

14

outClass: 'pt-page-moveToRightEasing pt-page-ontop',inClass: 'pt-page-moveFromLeft'

向上缓动

15

outClass: 'pt-page-moveToTopEasing pt-page-ontop',inClass: 'pt-page-moveFromBottom'

向下缓动

16

outClass: 'pt-page-moveToBottomEasing pt-page-ontop',inClass: 'pt-page-moveFromTop'

左移缩小消失

17

outClass: 'pt-page-scaleDown',inClass: 'pt-page-moveFromRight pt-page-ontop'

右移缩小消失

18

outClass: 'pt-page-scaleDown',inClass: 'pt-page-moveFromLeft pt-page-ontop'

上移缩小消失

19

outClass: 'pt-page-scaleDown',inClass: 'pt-page-moveFromBottom pt-page-ontop'

下移缩小消失

20

outClass: 'pt-page-scaleDown',inClass: 'pt-page-moveFromTop pt-page-ontop'

缩小出放大进1

21

outClass: 'pt-page-scaleDown',inClass: 'pt-page-scaleUpDown pt-page-delay300'

缩小出放大进2

22

outClass: 'pt-page-scaleDownUp',inClass: 'pt-page-scaleUp pt-page-delay300'

左移出放大进

23

outClass: 'pt-page-moveToLeft pt-page-ontop',inClass: 'pt-page-scaleUp'

右移出放大进

24

outClass: 'pt-page-moveToRight pt-page-ontop',inClass: 'pt-page-scaleUp'

上移出放大进

25

outClass: 'pt-page-moveToTop pt-page-ontop',inClass: 'pt-page-scaleUp'

下移出放大进

26

outClass: 'pt-page-moveToBottom pt-page-ontop',inClass: 'pt-page-scaleUp'

中心缩小出放大进

27

outClass: 'pt-page-scaleDownCenter',inClass: 'pt-page-scaleUpCenter pt-page-delay400'

右旋出左移进

28

outClass: 'pt-page-rotateRightSideFirst',inClass: 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop'

左旋出右移进

29

outClass: 'pt-page-rotateLeftSideFirst',inClass: 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop'

上旋出下移进

30

outClass: 'pt-page-rotateTopSideFirst',inClass: 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop'

下旋出上移进

31

outClass: 'pt-page-rotateBottomSideFirst',inClass: 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop'

右翻转出左翻转进

32

outClass: 'pt-page-flipOutRight',inClass: 'pt-page-flipInLeft pt-page-delay500'

左翻转出右翻转进

33

outClass: 'pt-page-flipOutLeft',inClass: 'pt-page-flipInRight pt-page-delay500'

上翻转出下翻转进

34

outClass: 'pt-page-flipOutTop',inClass: 'pt-page-flipInBottom pt-page-delay500'

下翻转出上翻转进

35

outClass: 'pt-page-flipOutBottom',inClass: 'pt-page-flipInTop pt-page-delay500'

右上角跌落

36

outClass: 'pt-page-rotateFall pt-page-ontop',inClass: 'pt-page-scaleUp'

新闻快报

37

outClass: 'pt-page-rotateOutNewspaper',inClass: 'pt-page-rotateInNewspaper pt-page-delay500'

左推

38

outClass: 'pt-page-rotatePushLeft',inClass: 'pt-page-moveFromRight'

右推

39

outClass: 'pt-page-rotatePushRight',inClass: 'pt-page-moveFromLeft'

上推

40

outClass: 'pt-page-rotatePushTop',inClass: 'pt-page-moveFromBottom'

下推

41

outClass: 'pt-page-rotatePushBottom',inClass: 'pt-page-moveFromTop'

左推右拉

42

outClass: 'pt-page-rotatePushLeft',inClass: 'pt-page-rotatePullRight pt-page-delay180'

右推左拉

43

outClass: 'pt-page-rotatePushRight',inClass: 'pt-page-rotatePullLeft pt-page-delay180'

上推下拉

44

outClass: 'pt-page-rotatePushTop',inClass: 'pt-page-rotatePullBottom pt-page-delay180'

下推上拉

45

outClass: 'pt-page-rotatePushBottom',inClass: 'pt-page-rotatePullTop pt-page-delay180'

向左折叠

46

outClass: 'pt-page-rotateFoldLeft',inClass: 'pt-page-moveFromRightFade'

向右折叠

47

outClass: 'pt-page-rotateFoldRight',inClass: 'pt-page-moveFromLeftFade'

向上折叠

48

outClass: 'pt-page-rotateFoldTop',inClass: 'pt-page-moveFromBottomFade'

向下折叠

49

outClass: 'pt-page-rotateFoldBottom',inClass: 'pt-page-moveFromTopFade'

左反折叠

50

outClass: 'pt-page-moveToRightFade',inClass: 'pt-page-rotateUnfoldLeft'

右反折叠

51

outClass: 'pt-page-moveToLeftFade',inClass: 'pt-page-rotateUnfoldRight'

上反折叠

52

outClass: 'pt-page-moveToBottomFade',inClass: 'pt-page-rotateUnfoldTop'

下反折叠

53

outClass: 'pt-page-moveToTopFade',inClass: 'pt-page-rotateUnfoldBottom'

向左缩小

54

outClass: 'pt-page-rotateRoomLeftOut pt-page-ontop',inClass: 'pt-page-rotateRoomLeftIn'

向右缩小

55

outClass: 'pt-page-rotateRoomRightOut pt-page-ontop',inClass: 'pt-page-rotateRoomRightIn'

向上缩小

56

outClass: 'pt-page-rotateRoomTopOut pt-page-ontop',inClass: 'pt-page-rotateRoomTopIn'

向下缩小

57

outClass: 'pt-page-rotateRoomBottomOut pt-page-ontop',inClass: 'pt-page-rotateRoomBottomIn'

左旋转立方体

58

outClass: 'pt-page-rotateCubeLeftOut pt-page-ontop',inClass: 'pt-page-rotateCubeLeftIn'

右旋转立方体

59

outClass: 'pt-page-rotateCubeRightOut pt-page-ontop',inClass: 'pt-page-rotateCubeRightIn'

上旋转立方体

60

outClass: 'pt-page-rotateCubeTopOut pt-page-ontop',inClass: 'pt-page-rotateCubeTopIn'

下旋转立方体

61

outClass: 'pt-page-rotateCubeBottomOut pt-page-ontop',inClass: 'pt-page-rotateCubeBottomIn'

左旋转木马

62

outClass: 'pt-page-rotateCarouselLeftOut pt-page-ontop',inClass: 'pt-page-rotateCarouselLeftIn'

右旋转木马

63

outClass: 'pt-page-rotateCarouselRightOut pt-page-ontop',inClass: 'pt-page-rotateCarouselRightIn'

上旋转木马

64

outClass: 'pt-page-rotateCarouselTopOut pt-page-ontop',inClass: 'pt-page-rotateCarouselTopIn'

下旋转木马

65

outClass: 'pt-page-rotateCarouselBottomOut pt-page-ontop',inClass: 'pt-page-rotateCarouselBottomIn'

侧面

66

outClass: 'pt-page-rotateSidesOut',inClass: 'pt-page-rotateSidesIn pt-page-delay500'

滑动

67

outClass: 'pt-page-rotateSlideOut',inClass: 'pt-page-rotateSlideIn'

（4）设置页面元素动画

	<div class="webppt-wrap"><div class="page" data-animation="1"><div class="slide"><p class="page-center pt-page-rotateCubeLeftIn pt-page-delay500">第1页第1张，设置p标签动画效果</p></div>...</div>...</div><script>Webppt.start()</script>

给p标签添加动画效果，其中.page-center表示设置元素水平垂直居中对齐。注意：
1、元素动画效果可以是转场动画样式类，如pt-page-rotateCubeLeftIn。转场样式类参考【（3）设置PPT转场动画】
2、webppt引用了Animate.css样式类库，因此可以使用Animate.css样式类库的所有动画效果，用法参照Animate.css样式库，但需要 在class类添加.pt-page-delay500(pt-page-delay700等)类
3、pt-page-delay100、pt-page-delay180、pt-page-delay200、pt-page-delay300、pt-page-delay400、pt-page-delay500 pt-page-delay700、pt-page-delay1000表示动画延迟时间，单位为毫秒

   /*给p标签添加Animate.css动画类，需要在后面添加pt-page-delay500样式类*/<div class="webppt-wrap"><div class="page" data-animation="1">.....<div class="slide" data-animation="66"><p class="page-center animate__animated animate__rubberBand pt-page-delay500">第1页第2张</p></div>....</div></div>

（5）PPT添加翻页指示箭头

通过在.webppt-wrap容器下添加div.img-up等标签设置向左向右向上箭头

	<div class="webppt-wrap"><div class="page" data-animation="1">.....		  </div><div class="css_icon img-up pt-page-moveIconUp"></div><div class="css_icon img-left pt-page-moveIconLeft"></div><div class="css_icon img-right pt-page-moveIconRight"></div></div>

（6）设置全屏按钮

通过在.webppt-wrap容器下添加div.screenfull-menu标签设置全屏按钮

   /*给p标签添加Animate.css动画类，需要在后面添加pt-page-delay500样式类*/<div class="webppt-wrap"><div class="page" data-animation="1">.....		  </div><div class="screenfull-menu">全屏</div></div>

（7）设置右键菜单

在body下面添加如下代码：

   <div class="md-modal md-effect-4"><div class="md-body"><h3 class="md-title"><span>操作选项</span><button class="btn md-close">关闭</button></h3><div class="md-content"><ul><li>上一页</li><li>下一页</li><li>结束放映</li></ul></div><div class="md-footer"></div></div></div><script>Webppt.start().contextmenu();//设置上下文</script>

二、vue项目中使用

1.npm安装（推荐）

npm install webppt
//导入
import webppt from 'webppt';
import 'webppt/dist/style.css'

三、参考说明

1、class="webppt-wrap" 为顶级容器，包括所有的页面。具有的属性：

data-options，设置属性，为json格式的字符串，里面包括属性有：

loop：是否翻页循环。布尔类型
indexAnimate：首页是否支持转场动画。布尔类型
loadingAnimate：打开时是否显示加载动画。
pageIndicator：是否添加页面指示器 。布尔类型
upIcon：是否添加向上箭头。布尔类型
preload：设置是否自动预加载图片,默认自动预加载。自动预加载是页面一打开就自动预加载。布尔类型
preLoadPages：预加载图片的页数。数字类型
pageIndicatorColor：指示器颜色值。字符串数组类型。如['#99FF33','#CC0033','#99FFCC','#999933','#9966CC','#9999FF']

2、class=page,为幻灯片页面：

在class="webppt-wrap"标签下添加page页面，每个页面用类.page标识，如class="page page-1"。page序号用类名称表示， 序号从1递增，如page-2、page-3，每个页面必须有类标识。其中page-1序号自动生成。page具有的属性：

  1. data-animation属性：指定当前页面应用的动画类型，数字。

3、class=slide，为幻灯片页下的子幻灯片。

幻灯片页面，每个页面下可以有多个幻灯片页面。在class="page"标签下添加slide子幻灯片，每个子幻灯片用类.slide标识， 如class="slide page-1-1"。幻灯片序号用类名称表示，序号从1递增，如page-1-1、page-1-2、page-2-1等。 表示第几页下的第几个幻灯片，其中page-1-1序号自动生成。具有的属性：

  1. 属性data-animation：指定当前页面应用的动画类型，数字。

4、class="img-up" ，翻页指示箭头。位置放在class="webppt-wrap"元素下。

5、页面图片预加载。预加载的图片只能放在.page标签下或子孙标签下。

img标签图片预加载，将真实的图片路径放在img标签的data-src属性里。如：

。

  1. html标签的背景图片预加载，将真实的图片路径放在html标签的data-src属性里，并给html标签添加.preload-bg类名称。 如：

<div class='preload-bg' data-src='img/css_sprite01.png'></div>。

6、右键菜单功能：在页面单击右键，弹出动画效果选择菜单。

四、预定义css样式类

  1. .show：显示；.hide：隐藏；

  1. .page-center:页面居中（水平居中垂直居中）；.center：水平居中；.vertical：垂直居中；

  1. .rotate360：360度不停旋转

  1. .page .slide-indicator li：更改页面幻灯片背景颜色。.page .slide-indicator li.on：更改幻灯片当前活动背景颜色

  1. 可以应用animate.css库里面的动画效果类样式。

💻 贡献代码

仓库地址：https://gitee.com/qinyongcheng/webppt