最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核都是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 >
|
移动端div内手指滑动内容效果,不出现滚动条:
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
29
30
31
32
33
34
35
36
37
38
39
|
<br><br>$(function () { //手机滑动效果
var swiptleft = 0;
var swiptw = $( ".touchswipe" ).width() - $( ".borrowlistcon .block" ).eq(0).width();
$( ".touchswipe" ).swipe({
swipeLeft: function ( event , direction, distance, duration, fingerCount) {
swiptleft = swiptleft - distance;
if (swiptleft > swiptw) {
$( ".touchswipe .block" ).animate({
left: swiptleft + 'px'
}, 10)
}
else {
swiptleft = swiptw;
$( ".touchswipe .block" ).animate({
left: swiptw + 'px'
}, 10)
}
},
swipeRight : function ( event , direction, distance, duration, fingerCount) {
swiptleft = swiptleft + distance;
if (swiptleft < 0) {
$( ".touchswipe .block" ).animate({
left: swiptleft + 'px'
}, 10)
}
else {
swiptleft = 0;
$( ".touchswipe .block" ).animate({
left: 0 + 'px'
}, 10)
}
}
});
}) |
官方网站
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
现在有那么多的设备支持触摸事件,你没有理由不去丰富你的UI交互功能。
开发背景
TouchSwipe原本是为Renault 设计的,是在一个IPad的专题网站上展示一个汽车的相册,这个插件可以让用户触摸操作幻灯片的播放,例如up/down或者是left/right,当时(2010)jQuery移动开发还处于起步阶段,所以我们决定编写自己的插件将触摸事件jQuery。
特点
- Detects swipes in 4 directions, “up”, “down”, “left” and “right”
- Detects pinches “in” and “out”
- Supports single finger or double finger touch events
- Supports click events both on the touchSwipe object and its child objects
- Definable threshold / maxTimeThreshold to determin when a gesture is actually a swipe
- Events triggered for swipe “start”,”move”,”end” and “cancel”
- End event can be triggered either on touch release, or as soon as threshold is met
- Allows swiping and page scrolling
- Disables user input elements (Button, form, text etc) from triggering swipes
Swipe
在它最基本的,该插件将添加一部Swipe检测使用Swipe处理程序,你可以发现哪个方向用户Swipe。
$("#swipe").swipe({ swipe:function(event, direction, distance, duration, fingerCount) { $(this).text("You swiped " + direction ); } });
为了方便我们添加处理程序,只有在一个特定方向触发:swipeLeft, swipeRight, swipeUp, swipeDown,每种都通过了以下的论点:event, direction, distance, duration, fingerCount.
$("#swipe").swipe({ swipeLeft:function(event, direction, distance, duration, fingerCount) { //This only fires when the user swipes left } });
距离阈值
确保动作是一种故意swipe,最小距离阈值被添加,默认是75px。如果用户移动小于然后swipe[Direction] 的处理是不触发。
$("#threshold").swipe({ swipe:function(event, direction, distance, duration, fingerCount){ $(this).text("You swiped " + direction + " for " + distance + "px" ); }, threshold:100 });
Fingers
我们还可以限制swipe只触发1或“所有”组合的手指,用手指的value,0用手指将报告如果运行在非触摸设备(桌面)。
$("#fingers").swipe({ swipe:function(event, direction, distance, duration, fingerCount){ $(this).text("You swiped " + direction + " with " + fingerCount + " fingers" ); }, fingers:'all' });
Swipe Status
为了使更多的复杂界面的相互作用,也可以用于swipe每个阶段接收事件,使用swipeStatus处理程序。
$("#status").swipe( { swipeStatus:function(event, phase, direction, distance, duration, fingerCount) { //Here we can check the: //phase : 'start', 'move', 'end', 'cancel' //direction : 'left', 'right', 'up', 'down' //distance : Distance finger is from initial touch point in px //duration : Length of swipe in MS //fingerCount : the number of fingers used }, threshold:100, maxTimeThreshold:2500, fingers:'all' });
Simple image scroller demo
这个简单的例子使用刷卡状态检测当用户是移动的,但尚未达到滑动阈值,图像拖动直到达到阈值,并滚动到下一个图像,如果刷卡没有完成,图像会回到它开始的地方。
滑动事件
- swipe (事件,滑动的方向,滑动的距离,一次滑动的时间 , 几根手指),滑动事件还有 方法和上面相同 swipeLift – 向左滑动 swipeRight-向右滑动 swipeUp-向上滑动 swipeDown-向下滑动。
- swipeStatus (事件, 手指状态,滑动的方向,滑动的距离,一次滑动的时间 , 几根手指),swipeStatus 和 swipe 不同的是 这个参数是一直在执行的,大家可以看看下面的例子(复制到记事本上打开即可),来了解一下两个事件的不同之处。
- 两根手指往里捏或者扩张事件:pinchStatus(事件,手指状态 ,方向(in和out,需要注意的一点in是往外扩,out是往里捏),滑动的距离, 一次滑动的时间 , 几根手指, 变焦)
- 包含:pinchIn(向外扩张),pinchOut (向里捏)
- 其他常用事件还有:doubleTap (双击屏幕) click (单击屏幕) longTap (长按屏幕)
More info
For the source, documentation, detailed demos, or to contribute, see:
相关推荐
第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery] 第15课 - jQuery插件 - [精通JavaScript+jQuery]
javascript-filter-wechat-公众号-cheerio-类似jquery
JavaScript - jQuery实现短信验证码注册登录完整示例:JavaScript - jQuery和附件说明
artech-javascript-jquery-11
artech-javascript-jquery-13
artech-javascript-jquery-10
JavaScript实现短信验证码注册登录的三种方法,内附:JavaScript - Fetch.js、JavaScript - jQuery、JavaScript - XHR.js文件和说明。
artech-javascript-jquery-14
artech-javascript-jquery-12
artech-javascript-jquery-15
Ajax-javascript-without-jquery.zip,提示和实例,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改...
jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载.rar
jquery简单控制上下、左右四方向滚动的特效插件下载.rar
jQuery实现产品图片循坏旋转的代码.rar
jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载.rar
客户管理界面 -jquery_air 手风琴效果 demo 水平或垂直的列表滑动 jcarousel 图片的缩放-放大鼠标移上的部分jquery 拖拽插件jquery 拖拽树形菜单 Draggables and droppables.files 相片画廊jquery
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jQuery黑色动感Ajax无刷新动态分组图片效果代码.rar
jQuery仿动感flash自动滚动图片切换广告插件.rar
javaScript--jQuery笔记.txt