谈谈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 相关文章推荐
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
使用JS前端技术实现静态图片局部流动效果
Aug 05 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实现的随机广告显示代码
2007/06/14 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
JS触摸与手势事件详解
2017/05/09 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
python encode和decode的妙用
2009/09/02 Python
python分析apache访问日志脚本分享
2015/02/26 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
什么是python的函数体
2020/06/19 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
出国留学介绍信
2014/01/13 职场文书
护士进修自我鉴定
2014/02/07 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
新教师个人总结
2015/02/06 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
社区党员干部承诺书
2015/05/04 职场文书