成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【譯】Impress.js制作酷炫Presentation PPT

kviccn / 2102人閱讀

摘要：由于是線上發(fā)布，所有有部分人問我怎么正確的使用它。因為沒有在實際的項目頁面設(shè)置幫助文檔。需求為了看到效果，請使用目前并不兼容早期的版本。第四張幻燈片來個新花樣，使用的值控制其縮放大小。

可以先看一個demo：http://dwqs.github.io/resume

昨天，我寫了一些關(guān)于Impress.js的東西，對于創(chuàng)建在線的自我展示，這是一個非常不錯的JavaScript庫。由于是線上發(fā)布，所有有部分人問我怎么正確的使用它。因為沒有在實際的項目頁面設(shè)置幫助文檔。這一篇文章將幫助你開始創(chuàng)建一個簡單的幻燈片，但是之后你一定要完成它，可以用它來做很多酷炫的效果，唯一限制你的就是你的創(chuàng)造力。

需求

為了看到效果，請使用Google Chrome or Safari (or Firefox 10 or IE10).Impress.js目前并不兼容早期的Firefox or Internet Explorer版本。

創(chuàng)建

首先，要創(chuàng)建一個Web頁面。我創(chuàng)建的頁面如下：

 
     
         
Impress Tutorial

在之前添加impress.js文件，將Impress.js導入到你的項目中

接下來創(chuàng)建一個id是impress的div容器包裹這個幻燈片，

創(chuàng)建幻燈片

在個人展示中，你將看到創(chuàng)建一個幻燈片是如此的簡單。每個幻燈片是一個class為step的div元素（被包裹在id是impress的容器內(nèi)）

(ps:div的id可有可無，當有id時url中的hash變化是隨著id走；反之就是step-[num]，如)

 
   My first slide

創(chuàng)建幻燈片的同時，要添加一些數(shù)據(jù)屬性。下面是一些可用的數(shù)據(jù)屬性：

data-x = 幻燈片的x坐標

data-y = 幻燈片的y坐標

data-z = 幻燈片的z坐標

data-scale = 通過指定一個值來進行縮放，data-scale為5則將會在你幻燈片原始尺寸基礎(chǔ)放大5倍

data-rotate = 通過一個數(shù)字度數(shù)來確定旋轉(zhuǎn)你的幻燈片

data-rotate-x = 為3D用，這個數(shù)字度數(shù)是它應該相對x軸旋轉(zhuǎn)多少度。（前傾/后仰）

data-rotate-y = 為3D用，這個數(shù)字度數(shù)是它應該相對y軸旋轉(zhuǎn)多少度。 （左擺/右擺）

data-rotate-z = 為3D用，這個數(shù)字度數(shù)是它應該相對z軸旋轉(zhuǎn)多少度。

讓數(shù)據(jù)屬性起作用

接下來的幻燈片設(shè)置將引導你理解每一個數(shù)據(jù)屬性

從一個初始的幻燈片開始，這個幻燈片已將它data-x和data-y數(shù)據(jù)屬性設(shè)置為0，所以會出現(xiàn)在頁面的中間。

 
    This is my first slide （顯示的內(nèi)容）

第二個幻燈片的data-x值為500、data-y值為0，活動的時候它將會向左平移(滑動)500px的地方。


    This is slide 2


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


    This is slide 3

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


    This is slide 4

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


    This is slide 5

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


This is slide 7 and it has a 3D transition AND a scale.

對于不支持Impress.js的瀏覽器做降級處理
在

<

div id=”impress”>之前添加如下一個div

 
 
        Your browser doesn"t support impress.js. Try Chrome or Safari.

然后將下列樣式添加到你的樣式表中：

.no-support-message { display:none; } 
.impress-not-supported .no-support-message { display:block; }

impreess源碼已經(jīng)發(fā)布在GitHub上，地址：https://github.com/bartaz/impress.js

官方demo地址：http://bartaz.github.com/impress.js

譯文出處：http://www.ido321.com/1513.html

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85649.html

相關(guān)文章

  • 每周前端開源推薦第二期

    摘要：每周前端開源推薦第二期是一個可自行部署的，類似我的忍不住發(fā)了個廣告捂臉后端即服務是將后端的一些邏輯抽樣出來變成一種服務，以便多平臺共同使用。 每周前端開源推薦第二期 strongloop/loopback LoopBack is an open source backend for your mobile apps. Connect to multiple data sour...

    Crazy_Coder 評論0 收藏0

  • 每周前端開源推薦第二期

    摘要：每周前端開源推薦第二期是一個可自行部署的，類似我的忍不住發(fā)了個廣告捂臉后端即服務是將后端的一些邏輯抽樣出來變成一種服務，以便多平臺共同使用。 每周前端開源推薦第二期 strongloop/loopback LoopBack is an open source backend for your mobile apps. Connect to multiple data sour...

    szysky 評論0 收藏0

  • 每周前端開源推薦第二期

    摘要：每周前端開源推薦第二期是一個可自行部署的，類似我的忍不住發(fā)了個廣告捂臉后端即服務是將后端的一些邏輯抽樣出來變成一種服務，以便多平臺共同使用。 每周前端開源推薦第二期 strongloop/loopback LoopBack is an open source backend for your mobile apps. Connect to multiple data sour...

    hoohack 評論0 收藏0

  • 用impress.js制作幻燈片

    摘要：前兩天學長回學校進行洗腦宣講，做了一個看上去很炫的縮放式幻燈片?？梢杂萌缦碌姆椒ㄌ砑拥谝豁摰幕脽羝阈枰獙懙氖呛?。如果用戶剛點開幻燈片而沒反應，這個提示會自動浮現(xiàn)。雖然這些東西很簡單，但做一個演講使用的幻燈片，也已經(jīng)足夠好了。 前兩天學長回學校進行洗腦宣講，做了一個看上去很炫的縮放式幻燈片。我不知道是不是太淺薄了，找了很久才找到幾個Web幻燈片工具?？戳藥讉€之后，我決定學習一下其中最G...

    noONE 評論0 收藏0

  • impress.js 源碼分析

    摘要：從源碼的起就是主函數(shù)和大，主函數(shù)我們可以再看它先引入然后調(diào)用這個函數(shù)那么我們接下來重點來研究這個函數(shù)初始值第一步我們簡歷來支持手機設(shè)備是一個函數(shù)，本人覺得就是借鑒了的源碼。 前言 之前做簡歷用到了impress.js，就像網(wǎng)頁版的preiz，簡直酷炫！貼上我的簡歷地址：可是沒想到昨天師兄內(nèi)推我說需要看懂impress.js源碼，這樣才能體現(xiàn)你學習鉆研的精神。orz。。真是挖個坑坑把自...

    ThinkSNS 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<