impress.js 一个创建在线幻灯的js库
真的好奇怪,我居然会写前端技术的博客。没有办法的,最近实习,看的大多是前端。所以今天就用这个来练练手了。
Impress.js 是一个非常棒的用来创建在线演示的Javascript库。它基于CSS3转 换和过渡、工作于现代浏览器(Google Chrome、Safari、Firefox 10 或 IE10)、并受prezi.com的理念启发的演示工具。如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常 好的选择,用它做的PPT更加直观,效果也非常不错。在线Demo:http://bartaz.github.io/impress.js/#/bored
下面这个是一个例子:
<!doctype html>
<html>
<head>
<title> Impress Tutorial</title>
<meta http-equiv="Content-Type" content="text/html"; charset=UTF-8">
</head>
<body>
<div id="impress">
<div class="step slide" data-x="0" data-y="0" data-scale="20"> My first slide </div>
<div class="step slide" data-x="1500" data-y="0" data-scale="10"> 2222222222222222222 </div>
<div class="step slide" data-x="500" data-y="-500" data-scale="10" data-rotate-x="20"> 333333333333333333333333 </div>
<div class="step slide" data-x="1500" data-y="-500" data-scale="0.5" data-rotate-x="0.5"> 4444444444444444444444444 </div>
</div> <script type="text/javascript" src="impress.js"> </script>
<script> impress().init();</script>
</body>
<html>
接下来就解释一下了。第15行是导入需要用到的js库,第16行是调用该库的初始化函数。一开始没有写这个,一直调用不成功。第8行的id="impress" 这个是固定的id。里面的div class="step" 也是固定的。这样的关系,就好像impress这个div是一个演示框架,然后每个step对应的div就像是一页一页的幻灯片。虽然我们都是写step,但是在js库中还是会进行编号处理的。这个下面再说。
对于每一页幻灯片来说,都应该有属性的。
data-x = 幻灯片的x坐标 (相对与impress这个div来说。整个impress的div是一个画布,中间的坐标是0 , 0 然后各个方向就跟直角坐标系一样定义。)
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轴旋转多少度。
data-scale讲解:
A:data-scale=20 B:data-scale=5 C:data-scale=0.5
因为我们的幻灯片是一页一页的播放的。假如现在播放A,那么就会以A为一个单位。然后B是会缩小为0.25倍与A。而C就更小了是A的100分之一。我们可以通过键盘的方向健来控制播放的是上一页还是下一页。我们播放B时,如果A的坐标在B的可视范围内的话,是会4倍大于B的。而这次是以B为单位大小。这里就会问,那每次等到播放的那个幻灯片就变成单位大小,那怎么放大显示啊,就是通过简单的css里面的font-size就可以了。
其实这个库提供的功能不是很多,但是由于运行在页面中,以前做幻灯片的时候没有想过的可以用javascript来控制页面,用css来控制样式,还可以加入各种库,来提高幻灯的开发效率了。现在都可以实现了。这个impress.js最主要的功能就是提供对每个div的编号,还有幻灯的上下页的衔接效果。对于动作效果,前端技术厉害的小伙伴完全可以自己写js的。
最后一个就是,对于每个step的div来说,内部是有个编码的,这个当你在播放幻灯的时候在网址的后面会成为这样。 http://1.1.1.1/index.html#/step-1 后面的编号就是自己加的。同时对于幻灯的顺序,有了这样编码方式后,我们完全可以通过js控制下一页播放的是哪一页,还有一个就是我们可以通过鼠标进行点击,然后跳转到指点的幻灯页。
下面给出一个最简单的例子
<!doctype html>
<html>
<head>
<title> Impress Tutorial</title>
<meta http-equiv="Content-Type" content="text/html"; charset=UTF-8">
<style>
div{
border:1px dashed #000;
font-size: 40px ;
}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
</style>
</head>
<body>
<div id="impress" >
<div class="step slide" data-x="0" data-y="-100" data-scale="1"> 1.<a href="#/step-5">aaaaaaaaa</a><br>2.<a href="#/step-8">bbbbbbbb</a><br>3.<a href="#/step-2">ccccccccc<a><br> </div>
<div class="step slide" data-x="100" data-y="100" data-scale="0.7" data-rotate-x="180" data-rotate-y="180" data-rotate-z="0"> My slide </div>
<div class="step slide" data-x="200" data-y="200" data-scale="0.5" data-rotate-x="180" data-rotate-y="0" data-rotate-z="180"> My slide </div>
<div class="step slide" data-x="300" data-y="300" data-scale="0.3" data-rotate-x="0" data-rotate-y="180" data-rotate-z="180"> My slide <a href="#/step-1">BACK</a></div>
<div class="step slide" data-x="-100" data-y="100" data-scale="0.7" data-rotate-x="180" data-rotate-y="0" data-rotate-z="180"> My slide </div>
<div class="step slide" data-x="-200" data-y="200" data-scale="0.5" data-rotate-x="0" data-rotate-y="180" data-rotate-z="180"> My slide </div>
<div class="step slide" data-x="-300" data-y="300" data-scale="0.3" data-rotate-x=180" data-rotate-y="180" data-rotate-z="0"> My slide <a href="#/step-1">BACK</a></div>
<div class="step slide" data-x="0" data-y="100" data-scale="0.7" data-rotate-x="0" data-rotate-y="180" data-rotate-z="180"> My slide </div>
<div class="step slide" data-x="0" data-y="200" data-scale="0.5" data-rotate-x="180" data-rotate-y="180" data-rotate-z="0"> My slide </div>
<div class="step slide" data-x="0" data-y="300" data-scale="0.3" data-rotate-x="180" data-rotate-y="180" data-rotate-z="0"> My slide <a href="#/step-1">BACK</a></div>
</div> <script type="text/javascript" src="impress.js"> </script>
<script> impress().init();</script>
</body>
<html>
其他功能的话,可以加上图片,然后用js控制图片的滑动,panel进行画图,jq等外接库。总之就是一个很强大的幻灯演示功能。
参考资料:
http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/
http://www.woiweb.net/impress-js-tutorial.html
本文地址: http://www.cnblogs.com/wunaozai/p/4055423.html
impress.js 一个创建在线幻灯的js库的更多相关文章
- css3clock.js - 一个用CSS3与纯js实现的简单时钟
前言 项目代码明细可以查看我Github上的源码:https://github.com/nelsonkuang/css3clock.js 实现思路 主要是用CSS3控制时针.分针和秒针旋转:时针每12 ...
- 用JS动态创建登录表单,报了个小错误
后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...
- 创建一个提供数据 API 的 Node.js 网站
创建站点目录 首先,创建一个文件夹用来保存你的站点文件,使用 mkdir 就可以了 PS C:\> mkdir mysite 然后,进入到这个文件夹进行下一步的操作. 创建包说明 使用记事本或者 ...
- Windows10安装node.js,vue.js以及创建第一个vue.js项目
[工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...
- 创建node.js一个简单的应用实例
在node.exe所在目录下,创建一个叫 server.js 的文件,并写入以下代码: //使用 require 指令来载入 http 模块 var http = require("http ...
- JS怎么创建一个类?
15. JS怎么创建一个类? 方式1 : var obj = new Object(); 方式2 : var obj = {}; 16.JS的typeof返回哪些数据类型? string.number ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)
Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...
- 分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...
随机推荐
- Dom4j完整教程,操作XML教程
目录 1.DOM4J简介 2.XML文档操作1 2.1.读取XML文档: 2.2.获取根节点 2.3.. 新增一个节点以及其下的子节点与数据 2.4. 写入XML文件 2. 5. 遍历xml节点 2. ...
- Ubuntu下的init.d管理update-rc.d
计算机在启动的时候会自动执行一些脚本,用于启动一些应用程序服务,update-rc.d 是管理这些脚本的常用命令之一. 首先这是 LinuxQuestions 中对 update-rc.d 的定义: ...
- HDU - 4198 Quick out of the Harbour (BFS+优先队列)
Description Captain Clearbeard decided to go to the harbour for a few days so his crew could inspect ...
- 【转载】Mysql主从复制、和MySQL集群(主主复制)
转载:https://www.cnblogs.com/phpstudy2015-6/p/6485819.html 请同时参考和结合这篇文件进行处理:https://blog.csdn.net/envo ...
- 【JS】移动端 好用的分享插件 soshm.js
参考链接:https://www.cnblogs.com/milo-wjh/p/6796082.html 对于qq内置浏览器分享功能处理:https://www.cnblogs.com/xuzheng ...
- ubuntu 16.04 LTS 修改 国内源(以中科大源为例)
国内有很多ubuntu的源,包括:网易源(这个之前用过,速度很快的),阿里源,还有很多教育网的源,如:清华源,中科大源. 这里要下载的是中科大ubuntu16.04的源列表,可以在这里获得:https ...
- Windows下的包管理器Chocolatey的使用
1.配置安装路径(后续需要管理员权限执行命令) Create a machine level (user level will also work) environment variable name ...
- OnPreRender事件常见用法
protected override void OnPreRender(EventArgs e) 1) 加入脚本 protected override void OnPreRender(EventAr ...
- CSVWriter生成文件时writer.writeRecord();方法保存的文件末尾多一个空行
一.问题,CSVWriter生成文件时使用writer.writeRecord();方法保存的文件末尾多一个空行,效果图如下: 目标结果:(去掉末尾空行) 二.关键代码如下(修改前代码): /** * ...
- hibernate联合主键注解方式
方法一:主键类用@Embeddable,pojo类仍然用@Entity但是引用主键类的对象用@Id 主键pojo类: @Embeddable public class composeIdPK impl ...