首頁 > web前端 > js教程 > 主體

談impress.js初步理解_javascript技巧

WBOY
發布: 2016-05-16 15:40:06
原創
1409 人瀏覽過

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:

複製程式碼 程式碼如下:



  現在你可以看到創建一個新的幻燈片是多少的容易了。每個投影片是一個

元素 (在wrapper內) 其class名稱叫做'step'。

複製程式碼 程式碼如下:


    My first slide


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

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的初步理解,可能對此理解比較膚淺,之後小編還會深入研究,請網友持續關注本站。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板