谈谈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使用include/require
Nov 13 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue-cropper组件实现图片切割上传
May 27 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
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php阳历转农历优化版
2016/08/08 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
基于Python的关键字监控及告警
2017/07/06 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
Django框架验证码用法实例分析
2019/05/10 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python实现ATM系统
2020/02/17 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
妇女工作先进事迹
2014/08/17 职场文书
2014年教研员工作总结
2014/12/23 职场文书
文明礼仪主题班会
2015/08/13 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL