国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

kviccn / 2080人閱讀

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

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

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

需求

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

創(chuàng)建

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

 
     
         
Impress Tutorial

在之前添加impress.js文件，將Impress.js導(dǎo)入到你的項(xiàng)目中

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

創(chuàng)建幻燈片

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

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

 
   My first slide

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

data-x = 幻燈片的x坐標(biāo)

data-y = 幻燈片的y坐標(biāo)

data-z = 幻燈片的z坐標(biāo)

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

data-rotate = 通過一個(gè)數(shù)字度數(shù)來確定旋轉(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)多少度。

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

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

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

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

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


    This is slide 2


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


    This is slide 3

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


    This is slide 4

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


    This is slide 5

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


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

對(duì)于不支持Impress.js的瀏覽器做降級(jí)處理
在

<

div id=”impress”>之前添加如下一個(gè)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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/85649.html

相關(guān)文章

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

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

    Crazy_Coder 評(píng)論0 收藏0

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

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

    szysky 評(píng)論0 收藏0

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

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

    hoohack 評(píng)論0 收藏0

  • 用impress.js制作幻燈片

    摘要：前兩天學(xué)長(zhǎng)回學(xué)校進(jìn)行洗腦宣講，做了一個(gè)看上去很炫的縮放式幻燈片。可以用如下的方法添加第一頁的幻燈片你需要寫的是和。如果用戶剛點(diǎn)開幻燈片而沒反應(yīng)，這個(gè)提示會(huì)自動(dòng)浮現(xiàn)。雖然這些東西很簡(jiǎn)單，但做一個(gè)演講使用的幻燈片，也已經(jīng)足夠好了。 前兩天學(xué)長(zhǎng)回學(xué)校進(jìn)行洗腦宣講，做了一個(gè)看上去很炫的縮放式幻燈片。我不知道是不是太淺薄了，找了很久才找到幾個(gè)Web幻燈片工具。看了幾個(gè)之后，我決定學(xué)習(xí)一下其中最G...

    noONE 評(píng)論0 收藏0

  • impress.js 源碼分析

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

    ThinkSNS 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<