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

  下面这个是一个例子:

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title> Impress Tutorial</title>
 5         <meta http-equiv="Content-Type" content="text/html"; charset=UTF-8">
 6     </head>
 7     <body>
 8         <div id="impress">
 9             <div class="step slide" data-x="0" data-y="0" data-scale="20"> My first slide </div>
10             <div class="step slide" data-x="1500" data-y="0" data-scale="10"> 2222222222222222222 </div>
11             <div class="step slide" data-x="500" data-y="-500" data-scale="10" data-rotate-x="20"> 333333333333333333333333 </div>
12             <div class="step slide" data-x="1500" data-y="-500" data-scale="0.5" data-rotate-x="0.5"> 4444444444444444444444444 </div>
13         </div>
14
15         <script type="text/javascript" src="impress.js"> </script>
16         <script> impress().init();</script>
17     </body>
18 <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控制下一页播放的是哪一页,还有一个就是我们可以通过鼠标进行点击,然后跳转到指点的幻灯页。

  下面给出一个最简单的例子

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <title> Impress Tutorial</title>
 5         <meta http-equiv="Content-Type" content="text/html"; charset=UTF-8">
 6         <style>
 7 div{
 8 border:1px dashed #000;
 9 font-size: 40px ;
10 }
11 a:link{text-decoration:none;}
12 a:visited{text-decoration:none;}
13 a:hover{text-decoration:none;}
14 a:active{text-decoration:none;}
15         </style>
16     </head>
17     <body>
18         <div id="impress" >
19             <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>
20             <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>
21             <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>
22             <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>
23             <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>
24             <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>
25             <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>
26             <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>
27             <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>
28             <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>
29         </div>
30
31         <script type="text/javascript" src="impress.js"> </script>
32         <script> impress().init();</script>
33     </body>
34 <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

时间: 10-25

impress.js 一个创建在线幻灯的js库的相关文章

用JS动态创建登录表单,报了个小错误

后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各位仁兄美眉们一定要小心了额. 下面是这段js动态创建登录框的js代码: 1 onload = function () { 2 var dvObj = document.createElement('div'); 3 dvObj.style.border = 'Red 1px solid'; 4 dv

使用 Raspberry Pi 上的传感器在 Node.js 中创建一个 IoT Bluemix 应用程序

先决条件 一个IBM Bluemix 帐号,一个 Raspberry Pi 2 或 3,一个 PIR 运动传感器 适用于本文的 Github 存储库 如果您是一位精明的 Bluemix 开发人员,您可能只想看看如何在 node.js 中与 IoT 建立连接,或者只想了解如何从此 github 存储库中拉取我的代码. git clone https://github.com/nicolefinnie/iot-nodejs-tutorial 以下是实现与 IBM IoT 平台连接在一起的 4 个 R

Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)

Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. wap银联支付流程是这样:客户端---> 服务器(构建支付请求)--> 银联支付 ---> 返回到服务端(处理支付结果).所以对于手机网站银联支付没有问题,但是对于ios端app和android端app, 再通过wap支付,发现支付成功后,很难在回到app客户端了. 所以这里就必须借助Pho

创建HTML新元素(js)

1 <!-- 2 创建新的HTML元素 3 1.创建新的元素 4 2.创建新的节点 5 3.追加节点 6 4.向已有元素追加新的元素 7 --> 8 <html> 9 <body> 10 11 <div id="div1"> 12 <p id="p1">这是一个段落</p> 13 <p id="p2">这是另一个段落</p> 14 </div&g

从一个简单例子来理解js引用类型指针的工作方式

? 1 2 3 4 5 6 7 <script> var a = {n:1};  var b = a;   a.x = a = {n:2};  console.log(a.x);// --> undefined  console.log(b.x);// --> [object Object]  </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?".&

一个简单且丑陋的js切换背景图片基础示例

不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS范例</title> <script type="text/javascript"> function changeBg()

创业笔记-Node.js入门之JavaScript与Node.js

JavaScript与Node.js JavaScript与你 抛开技术,我们先来聊聊你以及你和JavaScript的关系.本章的主要目的是想让你看看,对你而言是否有必要继续阅读后续章节的内容. 如果你和我一样,那么你很早就开始利用HTML进行“开发”,正因如此,你接触到了这个叫JavaScript有趣的东西,而对于JavaScript,你只会基本的操作——为web页面添加交互. 而你真正想要的是“干货”,你想要知道如何构建复杂的web站点 —— 于是,你学习了一种诸如PHP.Ruby.Java

Numeral.js – 格式化和操作数字的 JavaScript 库

Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 时尚设计!三种奇特网格加载效果[附源码下载] 源码下载      在线演示 本文链接:Numer

Baffle.js – 用于实现文本模糊效果的 JavaScript 库

Baffle.js 是一个 JavaScript 库,设计用来模糊和揭开DOM元素的文本. 这些元素可以是一个 CSS 选择器的形式.一个节点列表或者一个单节点. 你也可以传递一个选择对象给插件. 在线演示      立即下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuery 图片轮播插