impress.js初探

最新推荐文章于 2024-03-14 11:52:10 发布

柠檬书铺

最新推荐文章于 2024-03-14 11:52:10 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： css

本文链接：https://blog.csdn.net/u013812091/article/details/73824998

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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