今天我有幸接触了impress.js,先是被他绚丽的外表所吸引,相信很多人也一样。
HTML+CSS+js对于一个未来码农还是能理解的,有点意思,关键是它给了 我们一个简单的思路或是说框架也好,我们可以自己发挥想象,创造力才是程序员的灵魂啊!
先付个网址impreess源码地址:https : //github.com/bartaz/impress. js 官方demo地址:http://bartaz.github.com/impress.js。
首先看看demo,培养一下感情。
然后直接下载Zip压缩包到自己电脑上,打开它。我们熟悉的index.htm。
懂下面一些参数基本就能套用了。但是,最好在自己已经在纸上设计好整个页面的情况下,在自己写代码
1.配置:标准的Html5页面
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>impress.js</title>
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div id="impress" class="impress-not-supported">
</div>
<script src="js/impress.js"></script>
<script>impress();</script>
</body>
</html>
2.每个幻灯片是一个<div>元素,其class名称叫做’step’。
<div class="step">
My first slide
</div>
3.数据说明
data-x = 幻灯片的x坐标
data-y = 幻灯片的y坐标
data-scale = 通过指定一个值来进行缩放,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
data-rotate = 通过一个数字度数来确定旋转你的幻灯片
data-rotate-x = 为3D用,这个数字度数是它应该相对x轴旋转多少度。(前倾/后仰)
data-rotate-y = 为3D用,这个数字度数是它应该相对y轴旋转多少度。 (左摆/右摆)
data-rotate-z = 为3D用,这个数字度数是它应该相对z轴旋转多少度。
4.使用impress.js提供的api来控制幻灯片的显示。
var api = impress();
`api.next()` - 跳到下一张幻灯片,
`api.prev()` - 跳到上一张幻灯片
`api.goto(stepElement) - 跳到制定的幻灯片