//touch滑屏事件

    var windowHeight = $(window).height(),
    $body = $("body");
    $body.css("height", windowHeight);

$("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 > 10 ) {
            alert("left 2 right");
        }
        else if ( Math.abs(X) > Math.abs(Y) && X < 10 ) {
            alert("right 2 left");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y > 10) {
            alert("top 2 bottom");
        }
        else if ( Math.abs(Y) > Math.abs(X) && Y < 10 ) {
            alert("bottom 2 top");
        }
        else{
            alert("just touch");
        }
    });

/touch滑屏事件的更多相关文章

  1. 移动端touch滑屏事件

    <script> var windowHeight = $(window).height(), $body = $("body");// console.log($(w ...

  2. JS移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  3. javascript移动端滑屏事件

    来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...

  4. mobile_竖向滑屏

    竖向滑屏 元素最终事件 = 元素初始位置 + 手指滑动距离 移动端,"手指按下","手指移动" 两个事件即可(且不需要嵌套),有需要时才使用 "手指离 ...

  5. H5案例分享:移动端滑屏 touch事件

    移动端滑屏 touch事件 移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

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

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

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

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

  8. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  9. 【原】移动web滑屏框架分享

    本月26号参加webrebuild深圳站,会上听了彪叔的对初心的讲解,“工匠精神”这个词又一次被提出,也再次引起了我对它的思考.专注一个项目并把它做得好,很好,更好...现实工作中,忙忙碌碌,抱着完成 ...

随机推荐

  1. USACO Section 1.5 Number Triangles 解题报告

    题目 题目描述 现在有一个数字三角形,第一行有一个数字,第二行有两个数字,以此类推...,现在从第一行开始累加,每次在一个节点累加完之后,下一个节点必须是它的左下方的那个节点或者是右下方那个节点,一直 ...

  2. 【ARC074e】RGB sequence

    Description ​ 一排\(n\)个格子,每个格子可以涂三种颜色的一种.现在给出\(m\)个形如"\([l,r]\)中必须恰好有\(x\)种颜色"的限制(\(1 \le l ...

  3. 编译安装haproxy开启支持SSL

    1.下载程序包 # wget http://www.haproxy.org/download/1.7/src/haproxy-1.7.5.tar.gz # tar xvf haproxy-1.7.5. ...

  4. 初识Unity Mesh

    Mesh概念:Mesh是Unity中的一个组件,称为网格组件.通俗的讲,Mesh是指模型的网格,3D模型是由多边形拼接而成,而多边形实际上是由多个三角形拼接而成的.所以一个3D模型的表面其实是由多个彼 ...

  5. BZOJ-3509 母函数+分块+暴力+FFT

    题目描述 给定一个长度为N的数组A[],求有多少对i, j, k(1<=i<j<k<=N)满足A[k]-A[j]=A[j]-A[i]. 输入格式 第一行一个整数N(N<= ...

  6. NATS_03:NATS发布/订阅机制

    概念 发布/订阅(Publish/subscribe 或pub/sub)是一种消息范式,消息的发送者(发布者)不是计划发送其消息给特定的接收者(订阅者).而是发布的消息分为不同的类别,而不需要知道什么 ...

  7. hadoop基础-SequenceFile详解

    hadoop基础-SequenceFile详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.SequenceFile简介 1>.什么是SequenceFile 序列文件 ...

  8. JSP中九大内置对象+request对象的属性介绍和如何应用

    JSP的九大内置对象requestresponseApplicationconfigoutpagepageContextsessionException默认没有,需要进行在Page指令下进行isErr ...

  9. 转:iOS绘制一个UIView

    绘制一个UIView 绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时 ...

  10. nodejs出现events.js:72中抛出错误 Error: listen EADDRINUSE

    <pre>events.js:72 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at errnoExce ...