谈谈impress.js初步理解


Posted in Javascript onSeptember 09, 2015

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初步理解

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

Javascript 相关文章推荐
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
JS前端加密算法示例
Dec 22 Javascript
node.js入门学习之url模块
Feb 25 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 #Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 #Javascript
JavaScript中实现Map的示例代码
Sep 09 #Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 #Javascript
javascript实现日期时间动态显示示例代码
Sep 08 #Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 #Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 #Javascript
You might like
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python简易版停车管理系统
2019/08/12 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python绘图实现显示中文
2019/12/04 Python
python关于调用函数外的变量实例
2019/12/26 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
C语言编程练习
2012/04/02 面试题
建筑文秘专业个人求职信范文
2013/12/28 职场文书
承办会议欢迎词
2014/01/17 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
追讨欠款律师函
2015/06/24 职场文书
校运会广播稿
2015/08/19 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL