溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

impress.js表現(xiàn)層框架的示例分析

發(fā)布時(shí)間：2021-10-14 09:54:25 來(lái)源：億速云 閱讀：141 作者：小新 欄目：移動(dòng)開(kāi)發(fā)

這篇文章主要介紹impress.js表現(xiàn)層框架的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！


------------------正文分割線------------------
概述
如果你已經(jīng)厭煩了使用PowerPoint制作PPT，那么impress.js是一個(gè)非常好的選擇，用它做的PPT更加直觀，效果也非常的不錯(cuò)。裝X是需要一定代價(jià)的，不過(guò)如果你是個(gè)前端愛(ài)好者那么一切就沒(méi)問(wèn)題了。當(dāng)然如果你能勉強(qiáng)明白HTML和CSS也沒(méi)問(wèn)題，看看這篇文章 + 一點(diǎn)點(diǎn)實(shí)踐（把官網(wǎng)上的例子拿來(lái)改改）即可...
impress.js 是國(guó)外一位開(kāi)發(fā)者受 Prezi 啟發(fā)，采用 CSS3 與 JavaScript 語(yǔ)言完成的一個(gè)可供開(kāi)發(fā)者使用的表現(xiàn)層框架(演示工具)。現(xiàn)在普通開(kāi)發(fā)者可以利用 impress.js 自己開(kāi)發(fā)出類(lèi)似效果的演示工具，但性能比基于 FLASH 的 Prezi 更優(yōu)。其功能包括畫(huà)布的無(wú)限旋轉(zhuǎn)與縮放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同時(shí)，也支持傳統(tǒng) PowerPoint 形式的幻燈演示。
目前 impress.js 是基于 webkit 瀏覽器（Chrome、Safari）開(kāi)發(fā)，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的瀏覽器也能正常運(yùn)行。
impreess源碼已經(jīng)發(fā)布在GitHub上，地址：https://github.com/bartaz/impress.js
官方demo地址：http://bartaz.github.com/impress.js
因?yàn)樵谄漤?xiàng)目網(wǎng)頁(yè)中卻沒(méi)有找到說(shuō)明文檔&使用文檔，所以這篇文章將一步一步創(chuàng)建一個(gè)較初級(jí)的演示文稿，我們接著往下走。
請(qǐng)準(zhǔn)備好現(xiàn)代瀏覽器：Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持，不知道為什么很多資料上寫(xiě)著IE10也能支持，背了個(gè)催。

配置
html5頁(yè)面結(jié)構(gòu)先準(zhǔn)備就緒
創(chuàng)建一個(gè)id="impress"的wrapper(載體)，直接div就好，其他標(biāo)簽同樣也可以
在body標(biāo)簽結(jié)束前引入impress.js文件并且調(diào)用
class="impress-not-supported"是當(dāng)瀏覽器不支持時(shí)顯示給用戶(hù)的提示信息，降級(jí)處理你懂的，不多解釋哈

代碼如下:


<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported">
</div>
<div id="impress">
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>


在wrapper內(nèi)創(chuàng)建一個(gè)幻燈片只需要新建一個(gè)class="step"的<div>即可。<div>的id可有可無(wú)，當(dāng)有id時(shí)url中的hash變化是隨著id走；反之就是step-[num]，如

代碼如下:


<div class="step">
first slide
</div>


數(shù)據(jù)屬性：用來(lái)描述幻燈片大小，切換等效果。
data-x = 幻燈片的x坐標(biāo)
data-y = 幻燈片的y坐標(biāo)
data-scale = 通過(guò)指定一個(gè)值來(lái)進(jìn)行縮放，data-scale為5則將會(huì)在你幻燈片原始尺寸基礎(chǔ)放大5倍
data-rotate = 通過(guò)一個(gè)數(shù)字度數(shù)來(lái)確定旋轉(zhuǎn)你的幻燈片
data-rotate-x = 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對(duì)x軸旋轉(zhuǎn)多少度。（前傾/后仰）
data-rotate-y = 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對(duì)y軸旋轉(zhuǎn)多少度。 （左擺/右擺）
data-rotate-z = 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對(duì)z軸旋轉(zhuǎn)多少度。

創(chuàng)建
數(shù)據(jù)屬性那段是你接下來(lái)需要重點(diǎn)打交道的，接下來(lái)開(kāi)始step by step創(chuàng)建一個(gè)演示文稿。
從一個(gè)初始的幻燈片開(kāi)始，這個(gè)幻燈片已將它data-x和data-y數(shù)據(jù)屬性設(shè)置為0，所以會(huì)出現(xiàn)在頁(yè)面的中間。

代碼如下:


<div class="step" data-x="0" data-y="0">
This is slide 1 - 【標(biāo)題】
</div>


第二個(gè)幻燈片的data-x值為500、data-y值為0，活動(dòng)的時(shí)候它將會(huì)向左平移(滑動(dòng))500px的地方。

代碼如下:


<div class="step" data-x="500" data-y="-400">
This is slide 2
</div>


第三張幻燈片其data-x值不變，data-y位置為-400，這將會(huì)是從頂部400px處滑入屏幕。

代碼如下:


<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>


第四張幻燈片來(lái)個(gè)新花樣，使用data-scale的值控制其縮放大小。data-scale="0.5"表示著它應(yīng)該是一半的尺寸，當(dāng)它變成活動(dòng)的演示時(shí)將通過(guò)必需的倍數(shù)調(diào)節(jié)所有幻燈片的縮放尺寸，從這一步絢麗開(kāi)始起步

代碼如下:


<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>


第五張幻燈片旋轉(zhuǎn)屬性允許你旋轉(zhuǎn)一個(gè)幻燈片到當(dāng)前視圖，幻燈片5被設(shè)置旋轉(zhuǎn)90度，視覺(jué)效果微叼哈

代碼如下:


<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>


第六張幻燈片開(kāi)始3D style，可為每個(gè)維度的軸指定旋轉(zhuǎn)屬性(x,y,z)。x軸是橫軸，意思是你可使事物傾斜(正值)或向后(負(fù)值)，y軸是豎軸，所以你可使事物向左搖擺(負(fù)值)或向右(正值)，z軸是縱軸，這將是旋轉(zhuǎn)的東西向上（負(fù)值）和向下（正值）。

代碼如下:


<div class="step" data-x="-1200" data-y="0"
data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>


以上6張幻燈片把數(shù)據(jù)屬性?xún)?nèi)的值都過(guò)了一遍，一張略high的演示文稿就呈現(xiàn)在我們眼前。你可以以你的想象力用不可思議的和令人驚奇的方式合并這些效果來(lái)創(chuàng)建你自己的幻燈片展示風(fēng)格。
全局預(yù)覽
個(gè)人超贊這個(gè)視覺(jué)體驗(yàn)，把所有的幻燈片都平行的展示，排列的合理會(huì)非常帥氣，使用方式就是在幻燈片6后面插入一段html.

代碼如下:


<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>


隨著你幻燈片位置的不同所以全局預(yù)覽的值也會(huì)不一樣，拿著結(jié)尾處的demo一點(diǎn)一點(diǎn)調(diào)整找感覺(jué)，希望你會(huì)喜歡！
完成后請(qǐng)記住它，用它做的不只局限于此，唯一的限制是你的創(chuàng)造力！

個(gè)人體會(huì)
正因?yàn)槲覀兪乔岸?，所以用前端技術(shù)做做各種嘗試沒(méi)什么不好，impress更可以讓我們的演示文稿更有新意，所以簡(jiǎn)單了解下絕對(duì)是值得的，學(xué)習(xí)是最好的投資。
優(yōu)點(diǎn)：
個(gè)人非常喜歡overview的功能
因?yàn)镠TML+CSS都需要自己完成，位置和效果都得自己經(jīng)手，視覺(jué)效果都由自己掌控
在我用過(guò)的同類(lèi)產(chǎn)品中視覺(jué)效果最絢，CSS3+3D效果，直接給觀眾看暈:)
缺點(diǎn)：
impress在視覺(jué)表現(xiàn)上確實(shí)非常強(qiáng)大，比起同樣做演示文稿的 html5slides 和 deck.js， impress.js的復(fù)雜度上高了不少，而且如果想把演示文稿排版的好看可能需要花掉大量的時(shí)間.
*如果閑impress麻煩的朋友可以去看看 html5slides 和 deck.js的資料，視覺(jué)效果會(huì)稍差一些，不過(guò)上手會(huì)簡(jiǎn)單不少。
不要把3D和旋轉(zhuǎn)用得太花哨、太絢，看的人會(huì)暈，恰當(dāng)就好哈

以下是demo代碼，初學(xué)者自己動(dòng)手多改改感覺(jué)就好了。

代碼如下:


<!doctype html>
<html>
<head>
<title>darren - Impress demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="http://bartaz.github.com/impress.js/css/impress-demo.css" rel="stylesheet" />
</head>
<body>
<div class="impress-not-supported">
<div class="fallback-message">
<p>你的瀏覽器<b>不支持</b> impress.js, 所以當(dāng)前展示的是簡(jiǎn)化版。</p>
<p>為了獲得更好的體驗(yàn)，請(qǐng)使用最新的 <b>Chrome</b>, <b>Safari</b> 或者 <b>Firefox</b> 瀏覽器。</p>
</div>
</div>
<div id="impress">
<div class="step" data-x="0" data-y="0">
Darren code - [標(biāo)題]
</div>
<div class="step" data-x="500" data-y="0">
This is slide 2
</div>
<div class="step" data-x="500" data-y="-400">
This is slide 3
</div>
<div class="step" data-x="500" data-y="-800" data-scale="0.5">
This is slide 4
</div>
<div class="step" data-x="0" data-y="-800" data-rotate="90">
This is slide 5
</div>
<div class="step" data-x="-1200" data-y="0" data-rotate-x="30" data-rotate-y="-30" data-rotate-z="90" data-scale="4">
This is slide 6
</div>
<!-- darren code -->
<div id="overview" class="step" data-x="-200" data-y="-500" data-scale="3"></div>
</div>
<script src="http://bartaz.github.com/impress.js/js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>

以上是“impress.js表現(xiàn)層框架的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手