impress.js学习总结
impress.js是一个很有趣的用来替代PPT的展示用的js工具,它的灵感来自
prezi
如果你要学习使用它,这里有很好的演示模板
使用它的第一步,下载 impress.js,引入到你的代码里,并执行impress().init();
或者你可以直接写下面的代码,这部分代码最好放在</body>
前面
<script type="text/javascript" src="http://files.cnblogs.com/lvyahui/impress.js"></script>
<script type="text/javascript">impress().init();</script>
然后记得给body
加上class="impress-not-supported"
,也就默认浏览器不支持如果浏览器支持,这个class会被去除的。
接下来,在body里面放置一个id="impress"
的容器,我这里就用div
了
<div id="impress"></div>
下一步,在id="impress"
的容器里放置class="step"
的容器,我这里还是用div
,每一个class="step"
的容器,就代表了一页幻灯片。这样的容易可以有下面这样的属性
属性名称 | 属性说明 |
---|---|
data-x | 幻灯片中心距离浏览器中心的x方向的像素值 |
data-y | 幻灯片中心距离浏览器中心的y方向的像素值 |
data-z | 幻灯片的深度,距离你的距离 |
data-scale | 通过指定一个值来进行缩放,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍 |
data-rotate | 通过一个数字度数来确定旋转你的幻灯片 |
data-rotate-x | 为3D用,这个数字度数是它应该相对x轴旋转多少度。(前倾/后仰) |
data-rotate-y | 为3D用,这个数字度数是它应该相对y轴旋转多少度。 (左摆/右摆) |
data-rotate-z | 为3D用,这个数字度数是它应该相对z轴旋转多少度。跟data-rotate相同 |
这些属性,前面的都好理解,后面三个我是这么理解的,比如下面代码应该表示如图
<div class="step" data-x="0" data-y="300" data-rotate-x="30" data-rotate-y="40" data-rotate-z="50">第五页幻灯片</div>
当然也可以加上当浏览器不支持时的提示信息
<div class="fallback-message"><p>浏览器太low了,请换个逼格高点的,最次也得欧朋火狐什么的</p></div>
再在css定义样式
.fallback-message{display:none;
}#impress-not-supported > .fallback-message{display:block;
}
至此impress
就算掌握了,下面就看创造力了,下面是我的实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><link href="css/test.css" rel="stylesheet" type="text/css" />
</head><body class="impress-not-supported"><!--浏览器不支持,提示信息--><div class="fallback-message"><p>浏览器太low了,请换个逼格高点的,最次也得欧朋火狐什么的</p></div><div id="impress"><div class="step" data-x="-300" data-y="-300">第八页幻灯片</div><div class="step" data-x="0" data-y="-300" data-scale="0.5" data-rotate="45">第一页幻灯片</div><div class="step" data-x="300" data-y="-300" data-rotate-x="45">第二页幻灯片</div><div class="step" data-x="300" data-y="0" data-rotate-y="45">第三页幻灯片</div><div class="step" data-x="300" data-y="300" data-rotate-z="45">第四页幻灯片</div><div class="step" data-x="0" data-y="300" data-rotate-x="30" data-rotate-y="40" data-rotate-z="50">第五页幻灯片</div><div class="step" data-x="-300" data-y="300" data-scale="0.8">第六页幻灯片</div><div class="step" data-x="-300" data-y="0" data-z="300">第七页幻灯片</div></div><script type="text/javascript" src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
转载于:https://www.cnblogs.com/lvyahui/p/4221828.html
impress.js学习总结相关推荐
- impress.js学习
引子 断断续续用了好几天,终于把 impress.js 源码看完,作为刚入门的前端菜鸟,这是我第一次看 js 源码,最初还是比较痛苦的.不过还好,impress.js源码的注释相当清楚,每个函数和事件 ...
- [转] impress.js学习
引子 断断续续用了好几天,终于把 impress.js 源码看完,作为刚入门的前端菜鸟,这是我第一次看 js 源码,最初还是比较痛苦的.不过还好,impress.js源码的注释相当清楚,每个函数和事件 ...
- impress.js 中文版 学习
impress.js 中文版 学习 从网上的中文版impress.js展示的源代码,后期会看英文的(英语太菜了,看着英文,一脸懵逼,尽量会看英文源码吧.尽量...) 研究impress官网的源码时,我 ...
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- 【华为云技术分享】【一统江湖的大前端】PPT制作库impress.js
<一统江湖的大前端>系列是笔者的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.今天要介绍的是大前端PPT制作库impress.js. ...
- 一统江湖的大前端(1)——PPT制作库impress.js(含附件)
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
- 如何用impress.js写有逼格的ppt
概述 这是我学习课程impress让你的内容"舞"起来而做的总结和练手. 你可以点这里在线预览我做的ppt 注意:等加载完了之后,点击空格键翻页! 简化模板 下面是一个简化的模板 ...
- 《转》impress.js页面PPT
impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).现在普通开发者可以利用 impress.js ...
- impress.js
介绍一下 impress.js是一个非常炫酷的幻灯片展示框架,依靠CSS3技术. impress.js使用起来非常简单,下面就来简单介绍一下其用法. Start 首先,当然要引入impress.js. ...
- 程序员装逼利器之impress.js
impress.js是一个javascript的第三方类库,可以实现ppt,动画,切换等功能,在所有的web浏览器上均有不错表现,但目前不支持手机浏览器. 下载地址: https://githu ...
最新文章
- LINUX系统环境下的QT编译安装
- gzip压缩後的javascript在ie下不加载
- 【错误记录】Flutter 构建报错 ( Error: Method not found: ‘CupertinoModalPopupRoute‘. | 下载最新 Flutter SDK 版本 )
- 财经法规税收征收管理法律制度练习题三
- Linux 学习_在Linux下面安装tomcat
- leetcode182. 查找重复的电子邮箱(SQL)
- 解决$ is not define
- 【Linux】bash: groupadd: command not found a
- excel随机数_利用excel快速凭空制造大量随机数据?想要制造什么数据都可以
- mysql dual表用法_详解Oracle数据库中DUAL表的使用
- 网页设计语言html做思维导图,web网页实现思维导图展示
- 用命令启动java我的世界_我的世界Minecraft Mod开发学习笔记 - 实现一个简单的命令Mod...
- css翻转箭头,巧用css3轻松实现箭头上下旋转
- 电脑一键重装系统发现内存占用率过高怎么办
- 如何成为一名优秀员工
- mysql错误1273_mysql8 参考手册--错误代码1273-1294
- 第一次用VNPY,通过仿真测试,踩过千万坑,我太难了~~~~~~
- sever and mirroring(服务器和镜像)是什么
- 使用METIS软件包进行图划分
- java 合并到一行_GROUP_CONCAT() 多行数据合并成一行
热门文章
- e服务器系统可以用PE来装吗,U盘安装系统有哪些方式可以启动WinPE
- SLAM--位姿图优化和PnP求解
- pyspark:basic_operating_1
- NumPy库---二元函数
- 异步ajax动态实现级联,JQuery异步加载无限下拉框级联功能实现示例
- Java动态so库修改,Adnroid so文件动态调试技巧
- 广义注意力- saliency map 关注图、gaze、Att
- 支持向量机(Support Vector Machine SVM)
- 现代通信原理10.2:采用匹配滤波器的数字基带传输系统误码性能分析
- 【DL小结5】Transformer模型与self attention