手机网站js touch触屏gesture手势demo

我们今天这文章是对上一篇文[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显示简洁有效。。。