impress.js是一个很有趣的用来替代PPT的展示用的js工具，它的灵感来自prezi

如果你要学习使用它，这里有很好的演示模板

使用它的第一步，下载 impress.js,引入到你的代码里，并执行impress().init();

或者你可以直接写下面的代码,这部分代码最好放在</body>前面

<script type="text/javascript" src="http://files.cnblogs.com/lvyahui/impress.js"></script>

<script type="text/javascript">impress().init();</script>

然后记得给body加上 class="impress-not-supported",也就默认浏览器不支持如果浏览器支持，这个class会被去除的。

接下来，在body里面放置一个id="impress"的容器，我这里就用div了

    <div id="impress">

    </div>

下一步，在id="impress"的容器里放置class="step"的容器，我这里还是用div,每一个class="step"的容器，就代表了一页幻灯片。这样的容易可以有下面这样的属性

属性名称 属性说明
data-x 幻灯片中心距离浏览器中心的x方向的像素值
data-y 幻灯片中心距离浏览器中心的y方向的像素值
data-z 幻灯片的深度，距离你的距离
data-scale 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
data-rotate 通过一个数字度数来确定旋转你的幻灯片
data-rotate-x 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）
data-rotate-y 为3D用，这个数字度数是它应该相对y轴旋转多少度。 （左摆/右摆）
data-rotate-z 为3D用，这个数字度数是它应该相对z轴旋转多少度。跟data-rotate相同

这些属性，前面的都好理解，后面三个我是这么理解的，比如下面代码应该表示如图

        <div class="step" data-x="0" data-y="300" data-rotate-x="30" data-rotate-y="40" data-rotate-z="50">

        	第五页幻灯片

        </div>

当然也可以加上当浏览器不支持时的提示信息

    <div class="fallback-message">

    	<p>浏览器太low了，请换个逼格高点的，最次也得欧朋火狐什么的</p>

    </div>

再在css定义样式

.fallback-message{

	display:none;

}

#impress-not-supported > .fallback-message{

	display:block;

}

至此impress就算掌握了，下面就看创造力了，下面是我的实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="css/test.css" rel="stylesheet" type="text/css" />

</head>

<body  class="impress-not-supported">

	<!--浏览器不支持，提示信息-->

    <div class="fallback-message">

    	<p>浏览器太low了，请换个逼格高点的，最次也得欧朋火狐什么的</p>

    </div>

    <div id="impress">

    	<div class="step" data-x="-300" data-y="-300">

        	第八页幻灯片

        </div>

    	<div class="step" data-x="0" data-y="-300" data-scale="0.5" data-rotate="45">

        	第一页幻灯片

        </div>

        <div class="step" data-x="300" data-y="-300" data-rotate-x="45">

        	第二页幻灯片

        </div>

        <div class="step" data-x="300" data-y="0"  data-rotate-y="45">

        	第三页幻灯片

        </div>

        <div class="step" data-x="300" data-y="300" data-rotate-z="45">

        	第四页幻灯片

        </div>

        <div class="step" data-x="0" data-y="300" data-rotate-x="30" data-rotate-y="40" data-rotate-z="50">

        	第五页幻灯片

        </div>

        <div class="step" data-x="-300" data-y="300" data-scale="0.8">

        	第六页幻灯片

        </div>

        <div class="step" data-x="-300" data-y="0" data-z="300">

        	第七页幻灯片

        </div>

    </div>

<script type="text/javascript" src="js/impress.js"></script>

<script>impress().init();</script>

</body>

</html>

impress.js学习总结的更多相关文章

  1. [转] impress.js学习

    引子 断断续续用了好几天,终于把 impress.js 源码看完,作为刚入门的前端菜鸟,这是我第一次看 js 源码,最初还是比较痛苦的.不过还好,impress.js源码的注释相当清楚,每个函数和事件 ...

  2. Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

    前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...

  3. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

  4. 一统江湖的大前端(1)——PPT制作库impress.js

    <一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...

  5. 如何用impress.js写有逼格的ppt

    概述 这是我学习课程impress让你的内容"舞"起来而做的总结和练手. 你可以点这里在线预览我做的ppt 注意:等加载完了之后,点击空格键翻页! 简化模板 下面是一个简化的模板 ...

  6. impress.js

    介绍一下 impress.js是一个非常炫酷的幻灯片展示框架,依靠CSS3技术. impress.js使用起来非常简单,下面就来简单介绍一下其用法. Start 首先,当然要引入impress.js. ...

  7. impress.js 中文注释

    impress.js 中文注释 玄魂 /** * impress.js *(本翻译并未完全遵照原作者的注释翻译) * Impress.js 是受 Prezi启发,基于现代浏览器的 CSS3 与 Jav ...

  8. 开胃小菜——impress.js代码详解

    README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. God of War - HDU 2809（状态压缩+模拟）

    题目大意:貌似是一个游戏,首先给出卢布的攻击,防御,还有血量,再给出每升一级增加的攻击防御还有血量,然后又N个敌人,杀死每个敌人都会得到一些经验,求杀死完所有敌人时剩余的最大血量. 分析:因为敌人比较 ...

  2. ios新特性

    @import  在xcode 5 下,为了更易于开发,增加了modules和 auto-linking 这两个新特性: 在以前,如果你要使用MapKit这个框架,你要这样做 1) 使用语句 #imp ...

  3. Oracle索引(B*tree与Bitmap)的学习总结

    在Oracle中,索引基本分为以下几种:B*Tree索引,反向索引,降序索引,位图索引,函数索引,interMedia全文索引等,其中最常用的是B*Tree索引和Bitmap索引.(1).与索引相关视 ...

  4. dede 如何去除[field:title/]里面出现的b标签

    调用[field:title/]标签,两边加<b>怎么去掉<b> 怎么回事??? 最近更新dede的版本后,调用[field:title/]标签,生成的标题两边会自动在标题两边 ...

  5. c#基础语言编程-序列化

    引言 程序员在编写应用程序的时候往往要将程序的某些数据存储在内存中,然后将其写入某个文件或是将它传输到网络中的另一台计算机上以实现通讯.这个将程序数据转化成能被存储并传输的格式的过程被称为" ...

  6. Android RecyclerView使用（一）

    RecyclerView一种可以替换掉listview gridview 瀑布流等控件的新视图控件,控制视图回收和复用 ==优化内存可以替换listview 与listview的不同之处是:listv ...

  7. /var/log目录下的20个Linux日志文件功能详解 分类： 服务器搭建 linux内核 Raspberry Pi 2015-03-27 19:15 80人阅读 评论(0) 收藏

    如果愿意在Linux环境方面花费些时间,首先就应该知道日志文件的所在位置以及它们包含的内容.在系统运行正常的情况下学习了解这些不同的日志文件有助于你在遇到紧急情况时从容找出问题并加以解决. 以下介绍的 ...

  8. Linux 常用命令使用方法大搜刮(转)

    1.# 表示权限用户(如:root),$ 表示普通用户  开机提示:Login:输入用户名  password:输入口令   用户是系统注册用户成功登陆后,可以进入相应的用户环境.  退出当前shel ...

  9. shell之“>/dev/null 2>&1” 详解(转)

    今天在自己的一个技术群中又被问道了这么一个问题,于是又通俗的解释了一下,做个记录,大家看看解释是否清楚! shell中可能经常能看到:>/dev/null 2>&1 命令的结果可以 ...

  10. iOS安全攻防（三）：使用Reveal分析他人app

    使用Reveal分析他人app 准备工作 1)已越狱的设备,而且已安装了OpenSSH,MobileSubstrate等有用工具(Cydia源里安装) 2)本地已安装了Reveal 操作步骤 1)拷贝 ...