@EncyKe
2016-05-09T03:44:36.000000Z
字数 1495
阅读 2092
前端 JavaScript
示例：中文示例
源码：Github
GUI构建工具：Strut
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=1024" /><meta name="apple-mobile-web-app-capable" content="yes" /></head><body class="impress-not-supported"><!-- body.impress-not-supported不为必须，仅为显示下面这一回调tip --><div class="fallback-message"><p>尊驾的浏览器太老土啦！<b>无法满足impress.js的要求</b>，现在你只能看到一些最朴素的演示画面。</p><p>为了欣赏漂亮的演示画面，请使用先进、优雅、快速、美丽、免费的现代浏览器，比如 <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> 。</p></div><script src="js/impress.js"></script><script>impress().init();</script></body></html>
div#impressdata-transition-duration：改变切换场景的速度，默认为1000，即1s； data-perspective：改变透视景深，默认为0，即2D场景；section.stepdata-x：X轴坐标，左上为0，左负右正； data-y：Y轴坐标，左上为0，上负下正； data-z：Z轴坐标，垂直于屏幕，屏幕里为负，屏幕外为正； data-scale：缩放比例； data-rotate：绕Z轴旋转角度，大于360度则旋转多圈，下同； data-rotate-x：绕X轴旋转角度； data-rotate-y：绕Y轴旋转角度；.step场景都有一个.future类；.present类，可在此类下配置动画；.active类；同时，body会有一个.impress-on-id类，id即为当前场景的id；.past类；#overview.step.hint（可选）
<div class="hint"><p>使用空格或者方向键来移动</p></div><script>if ("ontouchstart" in document.documentElement) {document.querySelector(".hint").innerHTML = "<p>向左或向右拖动屏幕来移动</p>";}</script>
impress().init()；impress().prev()；impress().next()；impress().goto( idx | id | element, [duration] )；