zoukankan      html  css  js  c++  java
  • 谈谈impress.js初步理解

    1、对impress.js认识

      impress.js 采用 CSS3JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。

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

  • 相关阅读:
    22、闭包与继承
    合并两个有序链表
    7. 整数反转
    Linux grep命令
    认识与学习BASH
    微信支付-H5网页支付开通流程
    解决 Qt5 报错 This application failed to start because it could not find or load the Qt platform plugin
    Linux 创建交换分区扩展虚拟内存
    Linux 逻辑卷管理LVM
    Linux的文件权限
  • 原文地址:https://www.cnblogs.com/good10001/p/4800745.html
Copyright © 2011-2022 走看看