$("body").on("touchstart", function(e) {
     e.preventDefault();
     startX = e.originalEvent.changedTouches[0].pageX,
     startY = e.originalEvent.changedTouches[0].pageY;
 });
 $("body").on("touchmove", function(e) {
     e.preventDefault();
     moveEndX = e.originalEvent.changedTouches[0].pageX,
     moveEndY = e.originalEvent.changedTouches[0].pageY,
     X = moveEndX - startX,
     Y = moveEndY - startY;
      
     if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
         alert("left 2 right");
     }
     else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
         alert("right 2 left");
     }
     else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
         alert("top 2 bottom");
     }
     else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
         alert("bottom 2 top");
     }
     else{
         alert("just touch");
     }
 });

测试例子可以点击这里进行访问:判断手指滑动方向DEMO

《移动端浏览器Touch事件判断手指滑动方向方法》的更多相关文章

  1. 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...

  2. 移动端浏览器touch事件的研究总结

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  3. js判断手指滑动方向(移动端)

    var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...

  4. H5案例分享:移动端touch事件判断滑屏手势的方向

    移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...

  5. 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

    移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...

  6. 浅谈移动端之touch事件--手指的滑动事件

    今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...

  7. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  8. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

  9. 移动端html touch事件

    诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互.随着移动网络的发展,其能够支持越来越复杂的应用,web开 ...

随机推荐

  1. [C#]浅析ref、out参数

    转载:http://www.cnblogs.com/vd630/p/4601919.html#top 按引用传递的参数算是C#与很多其他语言相比的一大特色,想要深入理解这一概念应该说不是一件容易的事, ...

  2. java识别简单的验证码

    1.老规矩,先上图 要破解类似这样的验证码: 拆分后结果: 然后去匹配,得到结果. 2.拆分图片 拿到图片后,首先把图片中我们需要的部分截取出来. 具体的做法是,创建一个的和图片像素相同的一个代表权重 ...

  3. android-partition分析

    转载请注明来源:cuixiaolei的技术博客 这里讲下android的分区.具体的使用在另一片文章中介绍,这里只是把它拿出来介绍. android的存储分为两种 一种叫做RAM,如emmc标准的dd ...

  4. java Reference(摘录)

    Java中的Reference对象和GC是紧密联系在一起的,Reference的实现也是和GC相关的. 强引用 强引用是Java中使用最普遍的引用,我们经常使用的Object o = new Obje ...

  5. [学习笔记]设计模式之Prototype

    写在前面 为方便读者,本文已添加至索引: 设计模式 学习笔记索引 在笔记Builder模式中,我们曾见到了最初用于创建平行世界的函数createWorld,并且它是Mage类的成员函数(毕竟是专属于魔 ...

  6. vmware桥接模式创建ubuntu虚拟机

  7. XMLHttpRequest取得响应

    RresponseText:获得字符串形式的响应数据 responseXML:获得XML形式的响应数据 status和statusText:以数字和文本形式返回HTTP状态码 getAllRespon ...

  8. ros消息时间同步与回调

    转载自http://blog.csdn.net/zyh821351004/article/details/47758433 方式一: 全局变量形式  : TimeSynchronizer 步骤: 1. ...

  9. Quartz(GUI)图形界面程序----Quartz Web

    下载.设置和运行Quartz(GUI)图形界面程序----Quartz Web 一.获取Quartz Web程序(Quartz GUI).早期的 Quartz 框架开发者意识到一个 GUI 对于某类用 ...

  10. C++ namespace功能总结

    案例背景:你写了一些代码,其中有一个函数名为xyz(),同时另一个可用库里也有一个同名的函数xyz(), 编译器没有办法知道你指的是哪个版本的xyz(). 解决办法:A namespace is de ...