@EncyKe
2016-05-09T03:44:36.000000Z
字数 1495
阅读 2536
前端
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#impress
data-transition-duration
:改变切换场景的速度,默认为1000,即1s; data-perspective
:改变透视景深,默认为0,即2D场景;section.step
data-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] )
;