DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 談談impress.js初步理解
談談impress.js初步理解
編輯:關於JavaScript     

1、對impress.js認識

  impress.js 采用 CSS3 與 JavaScript 語言完成的一個可供開發者使用的表現層框架(演示工具)。

  現在普通開發者可以利用 impress.js 自己開發出類似效果的演示工具,但性能比基於 FLASH 的 Prezi 更優。其功能包括畫布的無限旋轉與縮放,任意角度放置任意大小的文字,CSS3 3D 效果支持等。同時,也支持傳統 PowerPoint 形式的幻燈演示。

  目前 impress.js 是基於 webkit 浏覽器(Chrome、Safari)開發,而在其它基於非 webkit 引擎,但支持 CSS3 3D 的浏覽器也能正常運行。

2、使用impress.js

  引入impress.js:

復制代碼 代碼如下:
<script src="js/impress.js"></script>

  現在你可以看到創建一個新的幻燈片是多少的容易了。每個幻燈片是一個<div>元素 (在wrapper內) 其class名稱叫做'step'。

復制代碼 代碼如下:
<div class="step">
    My first slide
</div>

  雖然是創建一個簡單的幻燈片,但你開始向你的幻燈片添加數據屬性時還是很有趣的。數據屬性表示它不是活動幻燈片時你的幻燈片的屬性,您可以使用下面的數據屬性:

data-x = 幻燈片的x坐標

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軸旋轉多少度。

實例目錄:


以上內容就是我對impress.js的初步理解,可能對此理解比較膚淺,之後小編還會深入研究,請網友持續關注本站。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved