谈谈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 异步页面查询实现代码(asp.net)
May 26 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
js实现图片360度旋转
Jan 22 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
vue-cli4.5.x快速搭建项目
May 30 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
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php实现httpclient类示例
2014/04/08 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
js资料toString 方法
2007/03/13 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python处理XML格式数据的方法详解
2017/03/21 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
django缓存配置的几种方法详解
2018/07/16 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python实现石头剪刀布程序
2021/01/20 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
户外婚礼策划方案
2014/02/08 职场文书
《自然之道》教学反思
2014/02/11 职场文书
老公爱的承诺书
2014/03/31 职场文书
出售房屋委托书范本
2014/09/24 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS