impress.js

最新推荐文章于 2024-03-19 09:34:08 发布

FreeMing-imduingui0

最新推荐文章于 2024-03-19 09:34:08 发布

阅读量540

点赞数

分类专栏：我的大学 jsp 随笔文章标签： jsp css html5 js PPT

本文链接：https://blog.csdn.net/qq_20881087/article/details/43856551

版权

随笔同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

我的大学

28 篇文章 0 订阅

订阅专栏

jsp

3 篇文章 0 订阅

订阅专栏

今天我有幸接触了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) - 跳到制定的幻灯片

FreeMing-imduingui0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
impress.js

今天我有幸接触了impress.js，先是被他绚丽的外表所吸引，相信很多人也一样。HTML+CSS+js对于一个未来码农还是能理解的，有点意思，关键是它给了我们一个简单的思路或是说框架也好，我们可以自己发挥想象，创造力才是程序员的灵魂啊!先付个网址impreess源码地址：https : //github.com/bartaz/impress. js 官方demo地址：http:/
复制链接

扫一扫

专栏目录