impress.js初探
宋宇
前面我基本用markdown代替了word以后，现在用impress.js代替ppt，当然啊这个需要一个较高版本的浏览器，chrome就不错。
可以从github上下载impress.js，基于CSS3，下载地址
打开index.html就可以放心食用。
例子：例子查看例子网页的源代码，作者已经在注释里很好的写了使用方式。使用左右方向键翻页。
如要修改幻灯片样式，则修改CSS文件即可
JS文件则提供了动作函数
以下是我做的html基础架构：
<!doctype html>
<html>
<head>
<title>basicimpressjs</title>
<meta charset="utf-8" />
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div id="impress">
<div class="step" data-x="0" data-y="0">
title
</div>
<div class="step" data-x="500" data-y="0" data-scale="5">
This is slide 2
</div>
<div class="step" data-x="500" data-y="-400" data-scale="5">
This is slide 3
</div>
<div class="step" data-z="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>
<!-- darren code -->
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
</div>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
我们看到，每一张幻灯片里边，有以下一些参数，可以来调节幻灯片的动作：
data-x:元素在x轴的位置
data-y:元素在y轴的位置
data-z:元素的z轴的位置
data-scale:元素缩放比例
data-rotate:元素旋转角度 注意是相对于0度旋转的角度
data-rotate-x: 元素绕x轴旋转角度 同上
data-rotate-y: 元素绕y轴旋转角度 同上
data-rotate-z: 元素绕z轴旋转角度 同上
每个div块中，仍然可以放心插入html格式的文件。甚至，可以另写js来给这些文件添加动作或功能。
类似资料：