必威体育Betway必威体育官网
当前位置:首页 > IT技术

impress.js 非常牛逼的前端装X利器

时间:2019-10-29 13:42:09来源:IT技术作者:seo实验室小编阅读:67次「手机版」
 

impress.js

查看原文

查看在线演示Demo和更多原文内容教程: impress.js 非常牛逼的前端装X利器

如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错。装X是需要一定代价的,不过如果你是个前端爱好者那么一切就没问题了。当然如果你能勉强明白HTMLCSS也没问题,看看这篇文章 + 一点点实践(把官网上的例子拿来改改)即可…

impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3javaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具,但性能比基于 FLASHPrezi 更优。其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等。同时,也支持传统 PowerPoint 形式的幻灯演示。

目前 impress.js 是基于 webkit 浏览器(Chrome、Safari)开发,而在其它基于非 webkit 引擎,但支持 CSS3 3D 的浏览器也能正常运行。

impreess源码:https://github.com/bartaz/impress.js

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

其他demo地址:http://www.webhek.com/misc/impress-js

因为在其项目网页中却没有找到说明文档&使用文档,所以这篇文章将一步一步创建一个较初级的演示文稿,我们接着往下走。

请准备好现代浏览器:Google Chrome(效果最佳)、Safari或FF.

配置

  1. html5页面结构先准备就绪
  2. 创建一个id=”impress”的wrAPPer(载体),直接p就好,其他标签同样也可以
  3. 在body标签结束前引入impress.js文件并且调用
  4. class=”impress-not-supported”是当浏览器不支持时显示给用户提示信息,降级处理你懂的,不多解释哈
<!doctype html>
<html>
<head>
  <title>darren - Impress demo</title>
  <meta charset="utf-8" />
  <link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
    <p class="impress-not-supported">
    </p>
  <p id="impress">
  </p>
  <script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
  <script>impress().init();</script>
</body>
</html>

更多详情,查询文档或百度

文章最后发布于: 2016-06-28 17:58:06

相关阅读

在angular框架下使用flv.js播放http-flv实时流直播视

目录 说明 总体思路 FFmpeg Nginx flv.js 效果展示 总结 说明 前段时间,我写了一篇在angular框架下使用videojs播放RTMP视频流

Jstorm + kafka 运用demo

首先 jstorm得概念请参考官网:点击打开链接,官网实例:点击打开链接 运行Jstorm可分为本地调试和分布式环境 1.先说分布式环境,首先搭

秒懂JSONArray和JSONObject的区别和使用

一.JSONObject是什么?就是对象json;之前在秒懂json中说过,{}表示对象,所以JSONObject就是:{"name":"tom"}同时,这里的对象Json通

js库Modernizr的介绍和使用

Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简

js实现音乐列表循环播放或单曲循环

简介 在前端页面中,有时候我们需要播放一首或者多首背景音乐,以此提高用户体验度。但是,很少有插件能够直接支持插入循环列表。因此

分享到:

栏目导航

推荐阅读

热门阅读