js touch触屏gesture手势demo

作者:林炜贤来源:www.163css.com发表时间:(2012-12-30)

我们今天这文章是对上一篇文章“js touch触屏原理分析”的扩展,关于手势的信息,大家可以先参考这文章“指尖下的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显示简洁有效。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2012/12/gesture.html

下载地址:js touch触屏gesture手势demo.rar

返回作者主页:www.163css.com阅读 (14041)
更多 1