【译】Impress.js制造酷炫Presentation PPT

2024年4月23日 200次阅读 来源: 不写代码的码农

能够先看一个demo：http://dwqs.github.io/resume

昨天，我写了一些关于Impress.js的东西，关于建立在线的自我展现，这是一个异常不错的JavaScript库。由因而线上宣布，一切有部份人问我怎样准确的运用它。由于没有在现实的项目页面设置协助文档。这一篇文章将协助你最先建立一个简朴的幻灯片，然则以后你一定要完成它，能够用它来做许多酷炫的结果，唯一限定你的就是你的创造力。

需求

为了看到结果，请运用Google Chrome or Safari (or Firefox 10 or IE10).Impress.js现在并不兼容初期的Firefox or Internet Explorer版本。

建立

起首，要建立一个Web页面。我建立的页面以下：

<!doctype html> 
<html>     
<head>         
<title>Impress Tutorial</title>         
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     
</head>     
<body>    

</body> 
</html>

在</body>之前增加impress.js文件，将Impress.js导入到你的项目中

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

接下来建立一个id是impress的div容器包裹这个幻灯片，

<div id=“impress”>

</div>

建立幻灯片

在个人展现中，你将看到建立一个幻灯片是云云的简朴。每一个幻灯片是一个class为step的div元素（被包裹在id是impress的容器内）

(ps:div的id无足轻重，当有id时url中的hash变化是跟着id走；反之就是step-[num]，如)

<div class="step"> 
   My first slide 
</div>

建立幻灯片的同时，要增加一些数据属性。下面是一些可用的数据属性：

data-x = 幻灯片的x坐标

data-y = 幻灯片的y坐标

data-z = 幻灯片的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-x和data-y数据属性设置为0，所以会出现在页面的中心。

<div class="step" data-x="0" data-y="0"> 
    This is my first slide （显现的内容）
</div>

第二个幻灯片的data-x值为500、data-y值为0，运动的时刻它将会向左平移(滑动)500px的处所。

<div class="step" data-x="500" data-y="-400">
    This is slide 2
</div>
    第三张幻灯片其data-x值稳定，data-y位置为-400，这将会是从顶部400px处滑入屏幕。
<div class="step" data-x="500" data-y="-400">
    This is slide 3
</div>

第四张幻灯片来个新花样，运用data-scale的值掌握其缩放大小。data-scale=”0.5″示意着它应当是一半的尺寸，当它变成运动的演示时将经由过程必须的倍数调治一切幻灯片的缩放尺寸，从这一步绮丽最先起步

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

第五张幻灯片扭转属性许可你扭转一个幻灯片到当前视图，幻灯片5被设置扭转90度，视觉结果微叼哈

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5
</div>

第六张幻灯片最先3D style，可为每一个维度的轴指定扭转属性(x,y,z)。x轴是横轴，意义是你可以使事物倾斜(正值)或向后(负值)，y轴是竖轴，所以你可以使事物向左摇晃(负值)或向右(正值)，z轴是纵轴，这将是扭转的东西向上（负值）和向下（正值）。

<div class=“step” data-x=“-2600″ data-y=“-800″ data-rotate-x=“30”

data-rotate-y=“-60″ data-rotate-z=“90” data-scale=“4”>
This is slide 7 and it has a 3D transition AND a scale.
</div>

关于不支持Impress.js的浏览器做降级处置惩罚
在

<

div id=”impress”>之前增加以下一个div

 <div class="no-support-message"> 
        Your browser doesn't support impress.js. Try Chrome or Safari. 
    </div>

然后将以下款式增加到你的款式表中：

.no-support-message { display:none; } 
.impress-not-supported .no-support-message { display:block; }

impreess源码已宣布在GitHub上，地点：https://github.com/bartaz/impress.js

官方demo地点：http://bartaz.github.com/impress.js

译文出处：http://www.ido321.com/1513.html

    原文作者：不写代码的码农
    原文地址: https://segmentfault.com/a/1190000002677883
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞