我們今天這文章是對上一篇文[url=]章“js touch觸屏原理分析”的[/url]擴展,關于手勢的信息,大家可以先參考這文章“指尖下的js — 多觸式web前端開發之三:處理復雜手勢”。我們所說的gesture,簡單地說就是兩個手指放在屏幕上,當然了,這是針對我們今天這個例子的,我還沒辦法寫得更加復雜。。。
我們今天的代碼是在昨天的基礎上添加的,我加上了三個變量,一個width,一個height,一個rotation,聰明的你,應該知道我想實現什么功能了,放大,縮小,旋轉。。。
我們加多一個gesturechange,一個gestureend,這個跟上面的touchstart類似。。。
在這里,我采用了scale這個CSS3功能,實現了放大的功能,再加上rotate實現旋轉的功能,不過,奇怪的是,我那種寫法,在android手機上,沒辦法旋轉,但拖動及放大功能是OK的,我在IPAD上測試旋轉也是OK的。。。
以下是我制作的效果截圖:
關于文字的居中,我采用了CSS3里的-webkit-box,-webkit-box-align: center;實現垂直居中,具體我看的CSS3代碼,相對于以前的復雜寫法,CSS3顯示簡潔有效。。。
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。