治疗技术焦虑的方法就是学习!

[转]手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明

前端 李新广 573℃ 0评论

最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核都是webkit,这就意味着手机网站是可以用html5和css3开发的,越开发越感觉到html5和css3的强大与它的重要性,且不谈html5和css3,做网站的时候遇到了一个大问题,就是触摸js的问题,以前都是写的电脑端的js,突然接触到触摸屏的js可真是脑袋大了,因为手机网站属于初期,即使你有问题也在互联网上很难找得到,后来就在这个文章上找到了关于触摸屏的js插件《43个处理触摸事件的jquery插件》,最后找了一个自己觉得不错的插件——TouchSwipe,TouchSwipe是依赖于jquery的,而这个插件也没有中文资料,那我今天就整理一下他的相关信息及教程。
注意:此插件虽好,但是需要注意的是如果手指事件会在a标签超链接内失效,笔者做了一个焦点图,如果图片上有A标记的话会失效,所以在官方没有改正之前,还是放弃吧。。。。(另一个手机触摸插件jQuery Touchwipe Plugin 轻量级的手机触摸特效插件(javascript)
事件:
滑动事件:
swipe (事件,滑动的方向,滑动的距离,一次滑动的时间 , 几根手指)
滑动事件还有 方法和上面相同 swipeLift – 向左滑动  swipeRight-向右滑动 swipeUp-向上滑动  swipeDown-向下滑动
swipeStatus (事件, 手指状态,滑动的方向,滑动的距离,一次滑动的时间 , 几根手指)
swipeStatus 和 swipe 不同的是 这个参数是一直在执行的,大家可以看看下面的例子(复制到记事本上打开即可),来了解一下两个事件的不同之处。
两根手指往里捏或者扩张事件:
pinchStatus(事件,手指状态 ,方向(in和out,需要注意的一点in是往外扩,out是往里捏),滑动的距离, 一次滑动的时间 , 几根手指, 变焦)
包含:pinchIn(向外扩张),pinchOut (向里捏)
其他常用事件还有:doubleTap (双击屏幕) click (单击屏幕) longTap (长按屏幕)
滑动事件demo:


转载自:
http://www.8abd.com/?p=539

转载请注明:大道至简 » [转]手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址