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>