impress.js 一个建立在线幻灯的js库

时间 2019-11-19

标签 impress.js impress 一个建立在线幻灯栏目 JavaScript 繁體版

原文原文链接

　　真的好奇怪，我竟然会写前端技术的博客。没有办法的，最近实习，看的大可能是前端。因此今天就用这个来练练手了。javascript

　　Impress.js 是一个很是棒的用来建立在线演示的Javascript库。它基于CSS3转换和过渡、工做于现代浏览器(Google Chrome、Safari、Firefox 10 或 IE10)、并受prezi.com的理念启发的演示工具。若是你已经厌烦了使用PowerPoint制做PPT，那么impress.js是一个很是好的选择，用它作的PPT更加直观，效果也很是不错。在线Demo：http://bartaz.github.io/impress.js/#/boredcss

　　下面这个是一个例子:html

 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库中仍是会进行编号处理的。这个下面再说。前端

　　对于每一页幻灯片来讲，都应该有属性的。java

　　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轴旋转多少度。git

　　data-scale讲解:github

　　A:data-scale=20 B:data-scale=5 C:data-scale=0.5web

　　由于咱们的幻灯片是一页一页的播放的。假如如今播放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