转自【B5教程网】:http://www.bcty365.com/content-142-5243-1.html

总结:touchmove的最后坐标减去touchstart的起始坐标。
X的结果如果正数,则说明手指是从左往右划动;
X的结果如果负数,则说明手指是从右往左划动;
Y的结果如果正数,则说明手指是从上往下划动;
Y的结果如果负数,则说明手指是从下往上划动。
转自【B5教程网】:http://www.bcty365.com/content-142-5243-1.html

代码如下:
 
$("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"); 
    } 
}); 
以上代码,在测试时仍不能达到预期的效果,此时要注意到一个事实--$('body').height = 0(此处是个大坑,但有时也不会出现,望大神指教)
故还应该在此基础上添加一下代码:
 
var windowHeight = $(window).height(), 
          $body = $("body"); 
      // console.log($(window).height()); 
      // console.log($('body').height()); 
      $body.css("height", windowHeight); 
到此,已实现了手机移动端手指的上滑、下滑、左滑和右滑操作。
转自【B5教程网】:http://www.bcty365.com/content-142-5243-1.html

移动端之touch事件--手指的滑动事件的更多相关文章

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

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

  2. touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  3. js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象).这个对象封装一次屏幕触摸,一般来自于手指. ...

  4. wap开发之滑动事件(swipe、tap、swipeleft、swiperight)等

    最近一直找在wap端可以实现的swipe等滑动事件的方法,开始研究了jquery-mobile,zepto,结果由于jqm太大.zepto有不少缺陷.为此研究了zepto,想把里面的swipe事件独立 ...

  5. AndroidのListView之滑动列表项(点击事件和滑动事件共存)

    这里正好在项目有这么一个bt的需求,如下图ListView的item可以响应点击事件也可以响应item的左右滑动事件,两个事件可以相互独立互不影响. 听说iphone的list选项就有这样bt的功能, ...

  6. 移动端touch触屏滑动事件、滑动触屏事件监听!

    一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...

  7. 移动端上下滑动事件之--坑爹的touch.js

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

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

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

  9. 移动端上下滑动事件之--坑爹的touch.js

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

随机推荐

  1. Visual studio C++ MFC之列表控件CListCtrl Control

    背景 本篇旨在MSDN帮助文档下总结列表控件CListCtrl Control的使用,并列出碰到的具体问题. 正文 列表型控件List Control的类是ClistCtrl,具体成员对象详见链接,以 ...

  2. pat(B) 1037. 在霍格沃茨找零钱(水题)

    代码: #include<cstdio> #include<iostream> #include<cstring> #include<algorithm> ...

  3. lucene 索引中文档的属性建立与不建立带来的影响总结

    索引中文档的属性建立与不建立带来的影响总结   1.依据文档的某属性去查找索引的话,只会返回带有此属性(如果你对当前属性设定了条件,那么需要满足当前条件)的所有文档,没有建立此属性的文档是不会在返回结 ...

  4. Log4j介绍,log4j.properties配置详解

    http://www.cnblogs.com/simle/archive/2011/09/29/2195341.html本文主要解释log4j的配置文件各个配置项的含义,内容是从网上转载的 1.Log ...

  5. spring boot和thrift、zookeeper建立微服务

    原文地址:http://www.cnblogs.com/skyblog/p/5535418.html Spring cloud适应于云端服务,也适用于企业信息化SOA建设.spring boot也是r ...

  6. Spring Cloud简单入门教程

    原文地址:http://www.cnblogs.com/skyblog/p/5127690.html 按照官方的话说:Spring Cloud 为开发者提供了在分布式系统(如配置管理.服务发现.断路器 ...

  7. ubuntu14.04 flash driver 安装

    直接将14.04镜像直接放到flash driver 中 然后在bios设置flash driver 优先启动 然后格出一块盘给ubuntu 安装使用 按操作要求一路点下去就可以,记得选windows ...

  8. 信号处理的好书Digital Signal Processing - A Practical Guide for Engineers and Scientists

    诚心给大家推荐一本讲信号处理的好书<Digital Signal Processing - A Practical Guide for Engineers and Scientists>[ ...

  9. bzoj1670【Usaco2006 Oct】Building the Moat 护城河的挖掘

    1670: [Usaco2006 Oct]Building the Moat护城河的挖掘 Time Limit: 3 Sec  Memory Limit: 64 MB Submit: 387  Sol ...

  10. 【转载】checkbox复选框的一些深入研究与理解

    转载来自:原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.一开始的唠叨最近忙于开发,自淫于项目的一步步完工,心浮躁了.舍近而求远,兵家之大忌. ...