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

最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核都是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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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://labs.rampinteractive.co.uk/touchSwipe/demos/

英文说明地址:

http://labs.rampinteractive.co.uk/touchSwipe/docs/symbols/%24.fn.swipe.html

下载地址

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

阅读更多

没有更多推荐了,返回首页