谈谈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 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
用JS实现选项卡
Mar 23 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
js查找节点的方法小结
2015/01/13 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python中的协程深入理解
2019/06/10 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
出纳担保书范文
2014/04/02 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
董事长年会致辞
2015/07/29 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS