注意:此插件虽好,但是需要注意的是如果手指事件会在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
下载地址