[关闭]
@EncyKe 2016-05-09T03:44:36.000000Z 字数 1495 阅读 2066

Impress.js

前端 JavaScript



1. 简介

示例:中文示例
源码:Github
GUI构建工具:Strut

2. 引入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta name="viewport" content="width=1024" />
  5. <meta name="apple-mobile-web-app-capable" content="yes" />
  6. </head>
  7. <body class="impress-not-supported">
  8. <!-- body.impress-not-supported不为必须,仅为显示下面这一回调tip -->
  9. <div class="fallback-message">
  10. <p>尊驾的浏览器太老土啦!<b>无法满足impress.js的要求</b>,现在你只能看到一些最朴素的演示画面。</p>
  11. <p>为了欣赏漂亮的演示画面,请使用先进、优雅、快速、美丽、免费的现代浏览器,比如 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b></p>
  12. </div>
  13. <script src="js/impress.js"></script>
  14. <script>impress().init();</script>
  15. </body>
  16. </html>

3. 结构

3.1. 外部大容器div#impress

3.2. 内部独立场景section.step

3.3. 追加#overview.step

3.4. 追加.hint(可选)

  1. <div class="hint">
  2. <p>使用空格或者方向键来移动</p>
  3. </div>
  4. <script>
  5. if ("ontouchstart" in document.documentElement) {
  6. document.querySelector(".hint").innerHTML = "<p>向左或向右拖动屏幕来移动</p>";
  7. }
  8. </script>

4. JS-API


附:参考

Impress.js中文教程
Impress.js教程
Impress.js初体验

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注