我們今天這文章是對(duì)上一篇文[url=]章“js touch觸屏原理分析”的[/url]擴(kuò)展，關(guān)于手勢(shì)的信息，大家可以先參考這文章“指尖下的js — 多觸式web前端開(kāi)發(fā)之三：處理復(fù)雜手勢(shì)”。我們所說(shuō)的gesture，簡(jiǎn)單地說(shuō)就是兩個(gè)手指放在屏幕上，當(dāng)然了，這是針對(duì)我們今天這個(gè)例子的，我還沒(méi)辦法寫(xiě)得更加復(fù)雜。。。
我們今天的代碼是在昨天的基礎(chǔ)上添加的，我加上了三個(gè)變量，一個(gè)width,一個(gè)height,一個(gè)rotation，聰明的你，應(yīng)該知道我想實(shí)現(xiàn)什么功能了，放大，縮小，旋轉(zhuǎn)。。。
我們加多一個(gè)gesturechange,一個(gè)gestureend，這個(gè)跟上面的touchstart類(lèi)似。。。
在這里，我采用了scale這個(gè)CSS3功能，實(shí)現(xiàn)了放大的功能，再加上rotate實(shí)現(xiàn)旋轉(zhuǎn)的功能，不過(guò)，奇怪的是，我那種寫(xiě)法，在android手機(jī)上，沒(méi)辦法旋轉(zhuǎn)，但拖動(dòng)及放大功能是OK的，我在IPAD上測(cè)試旋轉(zhuǎn)也是OK的。。。
以下是我制作的效果截圖：
關(guān)于文字的居中，我采用了CSS3里的-webkit-box，-webkit-box-align: center;實(shí)現(xiàn)垂直居中，具體我看的CSS3代碼，相對(duì)于以前的復(fù)雜寫(xiě)法，CSS3顯示簡(jiǎn)潔有效。。。