//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. 使用Dom4解析xml

    XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性.给数据集成与交互带来了极大的方便. XML在不同的语言环境中解析方式都是一样的,只不过实现的语法不同而已. XML的解析方式分为 ...

  2. Android 系统回收资源时进程被杀的优先级

    http://developer.android.com/guide/components/processes-and-threads.html#Processes Android 操作系统的内存回收 ...

  3. 解题:BZOJ 2818 GCD

    题面 转化一下题目,即是求$1$到$n$中对于某个素数$pri$使得$gcd(x*pri,y*pri)=pri$的$(x,y)$的数目 这样一来就可以考虑每个质数$pri$对答案的贡献,即为$1$到$ ...

  4. bzoj2961&&bzoj4140 共点圆

    题目描述 在平面直角坐标系中,Wayne需要你完成n次操作,操作只有两种: 1.0 x y.表示在坐标系中加入一个以(x, y)为圆心且过原点的圆. 2.1 x y.表示询问点(x, y)是否在所有已 ...

  5. linux内核增加系统调用--Beginner's guide

    Linux内核中设置了一组用于实现系统功能的子程序,称为系统调用.系统调用和普通库函数调用非常相似明知是系统调用由操作系统核心提供,运行于核心态,而普通的函数调用由函数库或用户自己提供,运行于用户态. ...

  6. 01 C++ 多线程入门实例

    1.可复用的完整实例 #include <iostream> #include <thread> #include <mutex> using namespace ...

  7. K8S调度之节点亲和性

    Node Affinity Affinity 翻译成中文是"亲和性",它对应的是 Anti-Affinity,我们翻译成"互斥".这两个词比较形象,可以把 po ...

  8. CF&&CC百套计划1 Codeforces Round #449 A. Nephren gives a riddle

    http://codeforces.com/contest/896/problem/A 第i个字符串嵌套第i-1个字符串 求第n个字符串的第k个字母 dfs #include<map> # ...

  9. 权限 mock location

    1.集成环信的时候,该权限报错: mock location权限是是“允许程序创建模拟位置”,主要是提供用于测试.打包的时候并不需要,所以解决办法分两步: 1.声明tools 2.添加忽略:

  10. spring框架学习(六)AOP事务及spring管理事务方式之Template模板

    概念 1.事务 1)事务特性:ACID 原子性 :强调事务的不可分割. 一致性 :事务的执行的前后数据的完整性保持一致. 隔离性 :一个事务执行的过程中,不应该受到其他事务的干扰. 持久性 :事务一旦 ...