谈谈impress.js初步理解

 更新时间:2015年09月09日 11:18:59   作者:HalfWater  
impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。感兴趣的朋友跟着小编一起学习吧

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的初步理解,可能对此理解比较肤浅,之后小编还会深入研究,请网友持续关注本站。

相关文章

  • easyui combobox开启搜索自动完成功能的实例代码

    easyui combobox开启搜索自动完成功能的实例代码

    下面小编就为大家带来一篇easyui combobox开启搜索自动完成功能的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 如何在webpack项目中调试loader插件

    如何在webpack项目中调试loader插件

    最近在学习webpack,本文主要介绍了loader插件的调试方法,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • js和as的稳定传值问题解决

    js和as的稳定传值问题解决

    最近在实现flash的播放音乐的功能,这就涉及到js和as交互的问题,因为要实现动态改变音乐文件的功能,可是如何判定呢?
    2013-07-07
  • JS判断数组中是否有重复值得三种实用方法

    JS判断数组中是否有重复值得三种实用方法

    数组中是否有重复值的判断方法有很多,本文为大家推荐下比较实用的3种方法,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • url 特殊字符 传递参数解决方法

    url 特殊字符 传递参数解决方法

    有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了。下表中列出了一些URL特殊符号及编码。
    2010-01-01
  • 小程序实现简单吸顶效果

    小程序实现简单吸顶效果

    这篇文章主要为大家详细介绍了小程序实现简单吸顶效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • PHP 502bad gateway原因及解决方案

    PHP 502bad gateway原因及解决方案

    这篇文章主要介绍了PHP 502bad gateway原因及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • Bootstrap入门书籍之(五)导航条、分页导航

    Bootstrap入门书籍之(五)导航条、分页导航

    这篇文章主要介绍了Bootstrap入门书籍之(五)导航条、分页导航的相关资料,需要的朋友可以参考下
    2016-02-02
  • 学习RxJS之JavaScript框架Cycle.js

    学习RxJS之JavaScript框架Cycle.js

    这篇文章主要介绍了学习RxJS之JavaScript框架Cycle.js ,它是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口,需要的朋友可以参考下
    2019-06-06
  • JavaScript实现动态表格的方法详解

    JavaScript实现动态表格的方法详解

    这篇文章主要为大家介绍了JavaScript实现动态表格的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01

最新评论