impress.js初探

来源：互联网发布：js判断等于0 编辑：程序博客网时间：2024/06/04 09:00

前面我基本用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来给这些文件添加动作或功能。

阅读全文

0 0