js仿ppt,在线演示文档:Impress.js
(附件)
Impress.js是一款基于css3转 换和过渡、工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10))、并受prezi.com的理念启发的演示工具。如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常 好的选择,用它做的PPT更加直观,效果也非常的不错。
Impress.js 是一个非常棒的用来创建在线演示的javascript库,但在其实际的项目网页中却没有说明文档。这篇指导将会帮你开始并创建一个简单的幻灯片演示,但完成后请记住它,用它做的不只局限于此,唯一的限制是你的创造力!
为你准备的可用的教程: 请在GitHub上查看下载。
必需条件
想看有效的教程,请使用Google Chrome或Safari (或 Firefox 10 或 IE10)。Impress.js目前不兼容早期版本的Firefox或Internet Explorer。
配置
首要的事情是你要创建一个新的网页,我的是index.html并且里面配置了基本的head和body元素。
<!doctype html>
<html>
<head>
<title>Impress Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body> </body>
</html>
在body元素结束前引入impress.js文件,这是Impress包引入到你的项目中。
<script type=”text/javascript” src=”impress.js”></script>
接下来我们将创建一个wrapper包含幻灯片,这里用一个简单的id为 ‘impress’<div>元素。
<div id="impress">
</div>
创建幻灯片
现在你可以看到创建一个新的幻灯片是多少的容易了。每个幻灯片是一个<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轴旋转多少度。
动作中的数据属性
下面的幻灯片设置将指导你完成每个动作的数据属性。
让我们从一个初始的幻灯片开始,这个幻灯片已将它自己的x和y数据属性设置为0,所以会出现在页面的中间。
<div class="step" data-x="0" data-y="0">
This is my first slide
</div>
第二个幻灯片的x值为500,但y值为0,这意味着当它活动的时候它将会出现在穿过x轴(向左滑动)500px的地方。
<div class="step" data-x="500" data-y="0">
This is slide 2
</div>
简单吧?下一个幻灯片将同第2个幻灯片同样的x位置开始,但其y位置为-400,这将会是从顶部400px处滑入。
<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>
幻灯片4使用缩放值来显示一个幻灯片如何放大缩小。它的scale值为0.5,意味着它应该是一半的尺寸。当 它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸。在这个示例中它的意思就是这个幻灯片应该正常显示(比例为1),它将需要被放大2倍 (0.5*2 = 1),所有的其他幻灯片也将被放大至2倍而变成2倍大小。
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
旋转属性允许你旋转一个幻灯片到当前视图,幻灯片5被设置旋转50度。
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5 and it rotates in.
</div>
最后,为3D转换,你可为每个维度的轴指定旋转属性(x,y,z)。
x轴是横轴,意思是你可使事物倾斜(正值)或向后(负值),y轴是竖轴,所以你可使事物向左摇摆(负值)或向右(正值),z轴是纵轴,这将是旋转的东西向上(负值)和向下(正值)。
组合
现在你了解了所有你需要给幻灯片展示添加动画效果的的数据属性,你可以以你的想象力用不可思议的和令人惊奇的方式合并这些效果来创建你自己的幻灯片展示风格。
<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
This is slide 7 and it has a 3D transition AND a scale.
</div>
不支持的浏览器
Impress自动检测浏览器支持与否,并且如果不支持则自动向wrapper“<div>”添加一个样式名称为“impress-not-supported”的样式,使用一些css我们可以在浏览器上向人们显示不支持Impress的信息。
在开始的<div id=”impress”>添加下面的内容:
<div class="no-support-message">
Your browser doesn't support impress.js. Try Chrome or Safari.
</div>
然后,创建一个样式表单或引入一个已经存在的样式表单:
.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; };
默认是隐藏消息的,但如果浏览器不支持时当前样式就会变成impress-not-supported。
玩得开心!
本教程介绍使用Impress.js创建自己的在线演示文稿的基本资料。整个例子您可在GitHub上下载和演示。
原文地址:http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/
译文地址:http://www.woiweb.net/impress-js-tutorial/
js仿ppt,在线演示文档:Impress.js的更多相关文章
- C# 10分钟入门基于WebOffice实现在线编辑文档,实时保存到服务器(所有office,兼容WPS)
今天,他来了(weboffice在线编辑文档). 上次写了一个在线预览的博,当然,效果并不是太理想,但是紧急解决了当时的问题. 后来,小编重新查找资料,求助大牛,终于使用新的方式替换了之前的low方法 ...
- WebApi生成在线API文档--Swagger
1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖 ...
- SpringBoot 使用Swagger2打造在线接口文档(附汉化教程)
原文地址: https://www.jianshu.com/p/7e543f0f0bd8 SpringBoot + Swagger2 UI界面-汉化教程 1.默认的英文界面UI 想必很多小伙伴都曾经使 ...
- WdatePicker.js的使用方法 帮助文档 使用说明(时间控件)
WdatePicker.js的使用方法 帮助文档 使用说明(时间控件) 4. 日期范围限制 静态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致 你可以给通过配 ...
- 如何安装使用MinDoc搭建个人在线wiki文档
MinDoc是什么? MinDoc是一个在线的文档管理系统,该系统适用于团队.个人等使用.开发者最初的目的是为了便于公司内部使用,仿照看云开发.有laravel版本以及golang版本.不过larav ...
- 在线HTML文档编辑器使用入门之图片上传与图片管理的实现
在线HTML文档编辑器使用入门之图片上传与图片管理的实现: 官方网址: http://kindeditor.net/demo.php 开发步骤: 1.开发中只需要导入选中的文件(通常在 webapp ...
- 第05章—Swagger2打造在线接口文档
spring boot 系列学习记录:http://www.cnblogs.com/jinxiaohang/p/8111057.html 码云源码地址:https://gitee.com/jinxia ...
- 【转】WdatePicker.js的使用方法 帮助文档 使用说明 如何使用
[转]WdatePicker.js的使用方法 帮助文档 使用说明 如何使用 日期控件支持平面显示功能,只要设置一下eCont属性就可以把它当作日历来使用了,无需触发条件,直接显示在页面上 示例2-1 ...
- Jeecg社区wiki在开放,最终能够在线看文档啦!!!
Jeecg社区wiki在开放,最终能够在线看文档啦! .! 2014-12-18 scott JEECG jeecg开源社区wiki正式启动了.方便大家看文档 訪问地址是: http://osbaba ...
随机推荐
- Win7 Python开发环境搭建
1. 下载Anaconda并安装 地址: https://www.anaconda.com/download/ Anaconda包括Python基础包与一系列科学计算包,安装后不用再单独安装Pyth ...
- Web 应用架构基础课(转载)
Web 应用架构基础课 初级 web 应用开发者必学的基础网络架构概念 web 应用主流架构概览 上图便是我司(Storyblocks)网络架构的很好展现.如果你还没成为经验老道的 web 工程师,可 ...
- 利用iOS中Safari浏览器创建伪Web App
在safari浏览器里有一个“添加到主屏幕”选项,我们可以用来创建伪Web App,下面来了解一下iOS中Safari的私有属性 第一步设置Web App的主屏幕图标: 有两种属性值apple-tou ...
- C++ 开源库列表
https://zh.cppreference.com/w/cpp/links/libs
- The Little Prince-11/30
The Little Prince-11/30 Today, I have a meeting in our department. I sincerely hope that all of my d ...
- Java中this和super关键字
今天练习到Java中的this和super关键字,我有如下总结: 1.子类继承父类,子类初始化对象,必须先调用父类构造方法,因为随时有可能要使用父类的成员变量. 2.get和set方法只是对成员变量进 ...
- C++重载>>和<<(输入输出运算符)
在C++中,标准库本身已经对左移运算符<<和右移运算符>>分别进行了重载,使其能够用于不同数据的输入输出,但是输入输出的对象只能是 C++ 内置的数据类型(例如 bool.in ...
- MyEclipse配置默认自带的Java代码格式化
1.配置注释一大段代码块后,格式化代码,已经注释的代码仍然保持原样 (1)首先,Window -> Prefrences -> Java -> Code Style -> Fo ...
- linux下nginx整合php
在nginx中药使用php可不像apache那样,因为apache是把php当做自己的一个模块来启动的, 而我们的nginx是把http请求转发给php程序,也就是说,php和nginx是相互独立的的 ...
- Linux网络管理(一):网卡驱动与Linux内核
下图简单描述了网卡驱动与Linux内核之间的联系: 关于上图的一些说明: 系统初始化: 1. 协议模块调用 dev_add_pack() 来注册协议处理函数到链表 &ptype_base: 2 ...