www.qjdy.com-奇迹赌场 > 佳美特设计 > 谈谈impress.js初步理解

原标题:谈谈impress.js初步理解

浏览次数:57 时间:2019-07-16

1、对impress.js认识

  impress.js 选择 CSS3 与 JavaScript 语言变成的叁个可供开垦者使用的显现层框架(演示工具)。

  未来习以为常开垦者能够动用 impress.js 本身开辟出像样意义的演示工具,但质量比基于 FLASH 的 Prezi 更优。其功用包涵画布的极致旋转与缩放,狂妄角度放置任性大小的文字,CSS3 3D 效果扶助等。同有的时候间,也支撑守旧 PowerPoint 格局的幻灯演示。

  近期 impress.js 是依据 webkit 浏览器(Chrome、Safari)开垦,而在其他基于非 webkit 引擎,但支撑 CSS3 3D 的浏览器也能正常运作。

2、使用impress.js

  引入impress.js:

复制代码 代码如下:

<script src="js/impress.js"></script>

  未来你能够见到创造二个新的幻灯片是有个别的轻便了。各样幻灯片是三个<div>元素(在wrapper内) 其class名称为作'step'。

复制代码 代码如下:

<div class="step">
    My first slide
</div>

  纵然是创办三个简易的幻灯片,但你开始向你的幻灯片加多数据属性时依旧很有趣的。数据属性表示它不是活动幻灯片时你的幻灯片的性格,您能够行使下边包车型大巴数量属性:

data-x = 幻灯片的x坐标

data-y = 幻灯片的y坐标

data-scale = 通过点名三个值来进行缩放,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍

data-rotate = 通过二个数字度数来规定旋转你的幻灯片

data-rotate-x = 为3D用,那么些数字度数是它应有相对x轴旋转多少度。(前倾/后仰)

data-rotate-y = 为3D用,这么些数字度数是它应该相对y轴旋转多少度。 (左摆/右摆)

data-rotate-z = 为3D用,这几个数字度数是它应有相对z轴旋转多少度。

实例目录:

图片 1

如上内容正是本人对impress.js的始发通晓,可能对此明白相比肤浅,之后作者还有或然会深切钻研,请网上朋友不停关心本站。

您或然感兴趣的篇章:

  • python运营办公软件进度(word、excel、ppt、以及wps的et、wps、wpp)
  • java读取word-excel-ppt文件代码
  • CentOS 5.4系统下安装VPN(pptp) 适用于Linux服务器
  • vba 获取PPT幻灯片中的全体题指标代码
  • word ppt excel文档调换到pdf的C#福寿绵绵代码
  • java使用poi读取ppt文件和poi读取excel、word示例
  • 利用impress.js制作幻灯片

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:谈谈impress.js初步理解

关键词:

上一篇:被改变对象的id

下一篇:没有了