impress.js表现层框架(演示工具)-初体验

2024-08-30 08:34:56

字体：大中小

来源：转载

供稿：网友

博客一歇就是半年，略惭愧...元旦假期各种惬意：打打Dota(悲催的输多赢少)、滑滑雪；吃吃东西、逛逛街。转眼儿今天就得上班了，5点早早起床(最近坚持早睡早起)，忍不住分享下前段时间发现的前端工程师装X的利器，所以这新年第一篇博文诞生了:)
你希望别人看到你的演示文稿会发出“wow”吗？你希望使用华丽的效果来震惊你的观众吗？那咱们往下看
------------------正文分割线------------------
概述
如果你已经厌烦了使用PowerPoint制作PPT，那么impress.js是一个非常好的选择，用它做的PPT更加直观，效果也非常的不错。装X是需要一定代价的，不过如果你是个前端爱好者那么一切就没问题了。当然如果你能勉强明白HTML和CSS也没问题，看看这篇文章 + 一点点实践（把官网上的例子拿来改改）即可...
impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。
目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。
impreess源码已经发布在GitHub上，地址：https://github.com/bartaz/impress.js
官方demo地址：http://bartaz.github.com/impress.js
因为在其项目网页中却没有找到说明文档&使用文档，所以这篇文章将一步一步创建一个较初级的演示文稿，我们接着往下走。
请准备好现代浏览器：Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持，不知道为什么很多资料上写着IE10也能支持，背了个催。

配置
html5页面结构先准备就绪
创建一个id="impress"的wrapper(载体)，直接div就好，其他标签同样也可以
在body标签结束前引入impress.js文件并且调用
class="impress-not-supported"是当浏览器不支持时显示给用户的提示信息，降级处理你懂的，不多解释哈

复制代码

上一篇：CSS(Cascading Style Sheet)级联样式表常用术语总结

下一篇：html5中几个不容错过的api或者tips小结