impress.js學習總結

時間 2019-11-19

標籤 impress.js impress 學習總結欄目 JavaScript 简体版

原文原文鏈接

impress.js是一個頗有趣的用來替代PPT的展現用的js工具，它的靈感來自prezijavascript

若是你要學習使用它，這裏有很好的演示模板css

使用它的第一步，下載 impress.js,引入到你的代碼裏，並執行impress().init();
或者你能夠直接寫下面的代碼,這部分代碼最好放在</body>前面html

<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了java

<div id="impress">
    </div>

下一步，在id="impress"的容器裏放置class="step"的容器，我這裏仍是用div,每個class="step"的容器，就表明了一頁幻燈片。這樣的容易能夠有下面這樣的屬性git

屬性名稱	屬性說明
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相同

這些屬性，前面的都好理解，後面三個我是這麼理解的，好比下面代碼應該表示如圖github

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。