谈谈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 相关文章推荐
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
详解javascript中的事件处理
Nov 06 Javascript
js实现微信分享代码
Oct 11 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
ES6的解构赋值实例详解
May 06 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
简单了解前端渐进式框架VUE
Jul 20 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读取mysql的简单实例
2014/01/15 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
JS面向对象编程详解
2016/03/06 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现查找系统盘中需要找的字符
2015/07/14 Python
详解Django中的权限和组以及消息
2015/07/23 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Scrapy的简单使用教程
2017/10/24 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
浅谈python 类方法/静态方法
2020/09/18 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2014年稽查工作总结
2014/12/20 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js