impress.js介绍
impress.js是一个在现代浏览器中基于CSS3的一个展示框架的JavaScript库，可以用来制作非常酷的幻灯片,impress.js就是受Prezi启发做成的。
impress.js源码：https://github.com/impress/impress.js
impress.js基本使用
- 创建自己的展示的目录文件
- 从impress.js项目里复制js和css目录和index.html
- 用浏览器打开index.html,就能看到impress.js给的官方demo
- 如果使用官方demo的模板样式，可以在官方demo上进行自己的ppt内容填充，如果想要设计自己的模板样式，需要有html/css的相关基础
press.js基本属性
- data-x:幻灯片的x坐标
- data-y:幻灯片的y坐标
- data-scale:通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
- data-rotate:通过一个数字度数来确定旋转你的幻灯片
- data-rotate-x:为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）
- data-rotate-y:为3D用，这个数字度数是它应该相对y轴旋转多少度。 （左摆/右摆）
- Data-rotate-z:为3D用，这个数字度数是它应该相对z轴旋转多少度
- data-autoplay:自动播放，设置自动播放时间
引入代码高亮组件hightlight.js
hightlight.js是一个代码高亮js框架，支持176种语言与79种展示样式，由此可以通过它，使得ppt上的代码片段更加优美．
hightlight.js源码：https://github.com/isagalaev/highlight.js
impress.js使用demo
下面代码只展示ppt核心展示的代码，相关js和css代码分别在js和css文件夹下，其中相关js和css可以从impress.js和hightlight.js项目源码中查找，具体样式也可以自己定制修改．
具体DEMO参看:https://github.com/yongssu/impress-demo/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>impressjs-demo</title>
<meta name="description" content="impressjs-demo" />
<meta name="author" content="yongssu" />
<link href="css/impress-demo.css" rel="stylesheet" />
<link href="css/vs.css" rel="stylesheet">
</head>
<body class="impress-not-supported">
<div class="fallback-message">
你的浏览器不支持，请按照 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> 等浏览器</p>
</div>
<div id="impress" data-autoplay="7">
<div id="title" class="step" data-x="1000" data-y="-1000" data-scale="10">
<h1>这是PPT的主标题</h1>
</div>
<div class="slide step" data-x="-1000" data-y="-1000" data-autoplay="10">
<h1>这是第01张PPT标题</h1>
<hr>
这是第一张PPT内容
<br>
这是第一张PPT内容
</div>
<div class="slide step" data-x="0" data-y="-1000">
<h1>这是第02张PPT标题</h1>
<hr>
旋转90度
</div>
<div class="step" data-x="-1000" data-y="0" data-scale="5">
<h1>这是第03张PPT标题</h1>
<hr>
比平常的ppt放大5倍
</div>
<div class="step" data-x="0" data-y="0" data-rotate-x="90">
<h1>这是第04张PPT标题</h1>
<hr>
3D x轴旋转90度
</div>
<div class="step" data-x="1000" data-y="0" data-rotate-x="90">
<h1>这是第05张PPT标题</h1>
<hr>
3D x轴旋转90度
</div>
<div class="step" data-x="-1000" data-y="1000" data-rotate-y="0">
<h1>这是第06张PPT标题</h1>
<hr>
data-rotate-y="0"
</div>
<div class="step" data-x="0" data-y="1000" data-rotate-y="90">
<h1>这是第07张PPT标题</h1>
<hr>
data-rotate-y="90"
</div>
<div class="step" data-x="1000" data-y="1000" data-rotate-y="0">
<h1>这是第08张PPT标题</h1>
<hr>
data-rotate-y="0"
</div>
<div class="step" data-x="-1000" data-y="2000" data-rotate-z="0">
<h1>这是第09张PPT标题</h1>
<hr>
data-rotate-z="0"
</div>
<div class="step" data-x="0" data-y="2000" data-rotate-z="90">
<h1>这是第10张PPT标题</h1>
<hr>
data-rotate-z="90"
</div>
<div class="step" data-x="1000" data-y="2000" data-rotate-z="0">
<h1>这是第11张PPT标题</h1>
<hr>
data-rotate-z="0"
</div>
<div class="slide step" data-x="1000" data-y="3000" data-rotate-z="0">
<h1>代码高亮</h1>
<hr>
<pre>
<code class="json">
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
</code>
</pre>
</div>
<div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
</div>
</div>
<!-- 控制组件 -->
<div id="impress-toolbar"></div>
<!-- 演讲者模式 -->
<div class="hint">
<p>Use a spacebar or arrow keys to navigate. <br/>
Press 'P' to launch speaker console.</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>";
}
</script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
网友评论