谈谈impress.js初步理解

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轴旋转多少度。

实例目录：

以上内容就是我对impress.js的初步理解，可能对此理解比较肤浅，之后小编还会深入研究，请网友持续关注本站。

赞 (0)

相关推荐

  • java使用poi读取ppt文件和poi读取excel、word示例

    Apache的POI项目可以用来处理MS Office文档,codeplex上还有一个它的.net版本.POI项目可创建和维护操作各种基于OOXML和OLE2文件格式的Java API.大多数MS Office都是OLE2格式的.POI通HSMF子项目来支持Outlook,通过HDGF子项目来支持Visio,通过HPBF子项目来支持Publisher. 使用POI抽取Word简单示例: 要引入poi-3.7.jat和poi-scratchpad-3.7.ajr这两个包. 复制代码 代码如下: p

  • CentOS 5.4系统下安装VPN(pptp) 适用于Linux服务器

    系统环境: CentOS 5.4 Final网卡: eth0: 98.126.x.x 先检查系统的MPPE,基本上CentOS本身都有,看到ok就可继续往下进行,不行的话就去打一下补丁,网上到处都是.modprobe ppp-compress-18 && echo ok CentOS5.4系统本身安装已经带了ppp版本,可以用这个版本,也可以重新安装,这里我卸载了,全部自己重新安装.rpm -q ppprpm -e rp-pppoerpm -e ppprm -rf /etc/ppp 所需要

  • word ppt excel文档转换成pdf的C#实现代码

    复制代码 代码如下: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms; using Word = Microsoft.Office.Interop.Word;using Excel = Micro

  • python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)

    复制代码 代码如下: #-*- coding:utf-8 -*- from win32com.client import Dispatch import time def start_office_application(app_name): # 在这里获取到app后,其它的操作和通过VBA操作办公软件类似 app = Dispatch(app_name) app.Visible = True time.sleep(0.5) app.Quit() if __name__ == '__main__

  • vba 获取PPT幻灯片中的所有标题的代码

    复制代码 代码如下: Private Sub CommandButton1_Click() Me.Enabled = False getTitles Me.Enabled = True End Sub Sub getTitles() On Error Resume Next Dim oPres As Presentation Set oPres = Application.ActivePresentation Dim oSlide As Slide Dim oShape As Shape Dim

  • java读取word-excel-ppt文件代码

    WORD: import org.apache.lucene.document.Document; import org.apache.lucene.document.Field; import org.apache.poi.hwpf.extractor.WordExtractor; import java.io.File; import java.io.InputStream; import java.io.FileInputStream; import com.search.code.Ind

  • 使用impress.js制作幻灯片

    上周看到一个朋友做了很炫的缩放式幻灯片,可能因为对此知识了解的不多,找了好久才找到几个web幻灯片工具.通过筛选决定用Geek的 impress.js . impress.js是一款新兴的幻灯工具,它的效果类似Prezi,但是拥有3D的功能,而且是在MIT&GPL协议下开源,对于有一定的Web开发基础的人而言,真是一个福音!只需要简单的用一些html指令,并加载impress.js就可以制作出一个很绚丽的缩放式幻灯. 制作时首先你需要写一些head,这和普通的Web是一样的,但body不同.由于

  • 谈谈impress.js初步理解

    谈谈impress.js初步理解

    1.对impress.js认识 impress.js 采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具). 现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具,但性能比基于 FLASH 的 Prezi 更优.其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等.同时,也支持传统 PowerPoint 形式的幻灯演示. 目前 impress.js 是基于 webkit 浏览器(Chrome.Saf

  • 谈谈node.js中的模块系统

    Node.js 的模块 JavaScript 做为一门为网页添加交互功能的简单脚本语言问世,在诞生时并不包含模块系统,随着 JavaScript 解决问题越来越复杂,把所有代码写在一个文件内,用 function 区分功能单元已经不能支撑复杂应用开发了,ES6 带来了大部分高级语言都有的 class 和 module,方便开发者组织代码 import _ from 'lodash'; class Fun {} export default Fun; 上面三行代码展示了一个模块系统最重要的两个要素

  • 简单谈谈原生js的math对象

    Math对象方法 //返回最大值 var max=Math.max(95,93,90,94,98); console.log(max); //返回最小值 var min=Math.min(95,93,90,94,98); console.log(min); //向上取整 console.log(Math.ceil(2.2)); console.log(Math.ceil(-2.2)); //向下取整 console.log(Math.floor(2.2));//2 console.log(Mat

  • 浅谈对yield的初步理解

    如下所示: def go(): while True: data = 1 r = yield data # data是返回值,r是接收值 print("data", data) print("A1", r) data += 1 r = yield data print("data",data) r += r print("A2", r) data += 1 r = yield data print("data&quo

  • 浅谈js闭包理解

    闭包是js中的一大特色,也是一大难点.简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量. 闭包的三大特点为: 1.函数嵌套函数 2.内部函数可以访问外部函数的变量 3.参数和变量不会被回收. 举例来说: function test(){ var a=1; return function(){ alert(a); } } var try=test(); try();//弹出a的值 这个例子中,变量a在test方法外部是无法访问的,但test方法里面,嵌套了一个匿名函数,通过ret

  • 浅析关于Keras的安装(pycharm)和初步理解

    Keras 是一个用 Python 编写的高级神经网络 API,它能够以 TensorFlow, CNTK, 或者 Theano 作为后端运行.Keras 的开发重点是支持快速的实验.能够以最小的时延把你的想法转换为实验结果,是做好研究的关键. 安装 Keras 兼容的 Python 版本: Python 2.7-3.6. 本人使用的是pycharm-2019.3版本 第一步.直接在命令窗口下 pip install keras==2.1.6 这里我之前设置了阿里的镜像,如果使用其他镜像,或者之

  • Python光学仿真学习衍射算法初步理解

    Python光学仿真学习衍射算法初步理解

    对衍射最经典的解释是Huygens-Fresnel原理,Huygens认为波阵面上每一点都会成为新的波源,这些子波源的相互干涉就形成了衍射.这显然是一种离散的观点,仿佛是专门为程序员准备的一样. 假设一束光打在一个方形孔上,这个方形孔被细分成 n×n个网格,那么每个网格都相当于是一个小孔,而这些小孔的互相干涉,即为衍射.随着网格不断被细分,最终可以逼近真实的衍射情形.那么,假设矩孔处为等相位面,其网格坐标为  (i,j),到衍射屏距离为 d d d,那么对于衍射屏上任意一点P(x,y),其光强为

  • 小白谈谈对JS原型链的理解

    小白谈谈对JS原型链的理解

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗称造人. 3)人他妈会记录啪啪啪的信息,所以可

  • JS如何理解data URL

    目录 概述 初识data URL data URL语法 字符串base64编解码的多种语言实现 1.unix  2.javascript  3.nodejs 4.python 5.php 6.java 7..net data URL常见问题 概述 canvas有一个非常常用的方法canvas.toDataURL(),它会将canvas转化为data URL的格式. 通常情况下这个data URL的类型为image. 看看下面的例子: <canvas id="canvas" hei

随机推荐