最近需要做一个手机小门户网站，因为目前主流的手机都是安卓和苹果的，他们的浏览器内核都是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]
touchSwipe 插件适用于那些需要在触摸屏设备上提供平滑滑动体验的项目。 在 **jQuery-touchSwipe-Carousel** 这个项目中，开发者将 touchSwipe 插件与轮播组件相结合，实现了对触摸事件的响应，使得用户可以通过在...
总的来说，这个"javascript经典特效---jquery简单控制上下、左右四方向滚动的特效插件下载"提供了网页元素动态滚动的解决方案，借助jQuery的强大功能，简化了开发者的工作，使得创建流畅、可控的滚动效果变得...
标题中的"javascript经典特效---jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载"指的是一个基于jQuery的插件，名为Zoomer Gallery。这个插件模仿了Flash技术的图片展示效果，但避免了Flash的一些限制，如...
【jQuery黑色动感Ajax无刷新动态分组图片效果代码】是一个基于JavaScript库jQuery实现的创新性网页特效，它利用Ajax技术实现了页面无刷新的状态下，动态加载和切换图片组的效果，为用户提供了流畅且富有视觉冲击力的...
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下载）...
在给定的标题"JavaScript libraries--->jQuery, Prototype, Mootools, YUI, Extjs, Dojo"中，提到了五种著名的JavaScript库：jQuery、Prototype、Mootools、YUI和ExtJS。这些库都有各自的特性和优势，下面将详细介绍...
JavaScript是一种广泛应用于网页和网络应用的编程语言，尤其在创建动态和交互性内容方面表现出色。"Title特效"指的是利用JavaScript实现的网页标题动画或交互效果。这些特效可以提升用户体验，吸引用户注意力，并使...
jQuery，这个JavaScript库，自2006年发布以来，一直是Web开发领域的明星工具。它以其简洁的API和强大的功能，极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在本篇文章中，我们将深入探讨jQuery ...
5. **jQuery库**：虽然题目中没有明确提到jQuery，但它是一种流行的JavaScript库，简化了DOM操作和事件处理，也提供了许多预设的动画效果，对于初学者来说，学习使用jQuery来创建页面特效是很好的选择。 6. **AJAX...
【jQuery触摸手机上下滑动滚屏特效】 在移动设备上，提供流畅的用户体验是至关重要的，尤其是当涉及到页面滚动时。jQuery触摸手机上下滑动滚屏特效是专门为智能手机和平板电脑设计的一种技术，旨在增强用户的浏览...
标题中的“图文切换-多浏览器兼容-jQuery-jcSlider”表明我们要探讨的是一个基于jQuery的JavaScript库，jcSlider，它专门用于实现图文切换效果，并且这个库在多种浏览器上具有良好的兼容性。以下是对这些知识点的...
今天，我们将探讨的是"jQuery.touchSwipe"插件，这是一款专门用于实现手机上下滑屏特效的JavaScript库。它基于jQuery框架，使得在手机和平板设备上实现类似滑动翻页的效果变得简单易行。 首先，我们来看一下标题...
6. **jQuery库**：虽然标签没有明确提到jQuery，但这个库简化了JavaScript的DOM操作和动画效果，很多经典特效的实现都可能基于jQuery。 7. **动画框架**：如GreenSock（GSAP）、Anime.js等，这些框架提供了更高级的...
前端开发手册大全11个(CSS-javascript-jquery-w3c-XHTML-XML).zip CSS参考手册-Web前端开发参考手册系列 Web前端开发规范手册必备 CSS参考手册 javascript参考手册 CSS参考手册 jquery参考手册 XML参考手册 XHTML...
jquery-3.7.1.js，未压缩文件，适用于开发或调试时使用。 jquery-3.7.1.min.js，压缩文件，更小、执行效率更高，适用于项目产品中使用。 jquery-3.7.1.min.map，源映射文件，可以配合压缩文件进行调试时使用，运行...
7. **响应式设计**：考虑到不同设备的触摸交互，开发者还可以用JavaScript检测触摸事件，并相应地调整鼠标效果，确保在触摸屏设备上的良好体验。 8. **AOS（Animate On Scroll）库**：这是一种流行的技术，它结合了...
在标签"javascript-ui"中，我们可以理解到jQuery UI专注于JavaScript的用户界面部分。JavaScript UI开发是现代Web开发的重要组成部分，它涉及到网页中动态元素的交互、布局和视觉效果。jQuery UI通过提供易于使用的...
【标题】：“jQuery手机触屏拖拽”技术详解 在移动设备上，用户与界面的交互方式由鼠标点击变为触屏操作，为了提供良好的用户体验，开发者需要为触屏设备优化网页交互。"jQuery手机触屏拖拽"技术就是为此而生，它...
jQuery，这个JavaScript库，自2006年发布以来，以其简洁的API和强大的功能，迅速成为开发者们首选的前端工具之一。本篇文章将深入探讨jQuery 1.9.1版本，包括其核心特性、性能优化以及实际应用。 首先，我们来看看...