手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
来源:互联网 发布:webview支持查看源码 编辑:程序博客网 时间:2024/06/05 03:59
最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核都是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:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.min.js"></script><script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js"></script><script>$(function() {//swipe 的dome$("#test").swipe( {swipe:function(event, direction, distance, duration, fingerCount) {$(this).text("你用"+fingerCount+"个手指以"+duration+"秒的速度向" + direction + "滑动了" +distance+ "像素 " );},});//swipeStatus的dome$("#test2").swipe( {swipeStatus:function(event, phase, direction, distance, duration,fingerCount) {$(this).text("你用"+fingerCount+"个手指以"+duration+"秒的速度向" + direction + "滑动了" +distance+ "像素 " +"你在"+phase+"中");},});});</script></head><body><div id="test" style="height:200px; background:#C63;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff">swipe 的dome</div><div id="test2" style="height:200px; background:#C63; margin-top:20px;-webkit-user-select:none; text-align:center; line-height:200px; color:#fff">swipeStatus的dome</div></body></html>
转载自:http://www.8abd.com/?p=539
- 手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
- 手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
- # 转:手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
- 手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
- 手机触摸屏特效javaScript-TouchSwipe(依赖于jQuery库)说明
- 关于 jquery/touchSwipe.js
- jquery.touchSwipe.min.js 的简单用法
- jQuery手机触摸滑动切换图片代码
- jquery 1.7 更新说明(中文)
- jquery.Validation 中文说明
- jquery.Validation 中文说明
- javascript 手机手势动作touch触屏原理分析,h5触摸下拉刷新上拉加载数据原理
- jquery ui中文说明(使用方法)
- jquery ui中文说明(使用方法)
- jquery ui中文说明(使用方法)
- HTML5手机页面触屏滑动上下翻页特效
- jQuery微信手机端九宫格抽奖代码特效
- jQuery常见特效(9)
- Java Web笔记:DAO设计模式
- listview绑定数据没有调用getview方法
- 接口使用方法java
- LeetCode—Reverse Linked List II指定位置翻转单链表
- Qt事件循环模型
- 手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明
- python2:数字
- debugfs一点小用法
- Shell脚本常识--(循环控制)
- (hdu step 8.1.7)愚人节的礼物(栈的基本使用——求特定字符前面'('的个数 )
- 经验
- PHP常用正则表达式汇总
- 习题4-10 洪水! UVa815
- Spring的AOP原理