//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. Typhoon-v1.02 靶机入侵

      0x01 前言 Typhoon VM包含多个漏洞和配置错误.Typhoon可用于测试网络服务中的漏洞,配置错误,易受攻击的Web应用程序,密码破解攻击,权限提升攻击,后期利用步骤,信息收集和DNS ...

  2. 利用ansible来做tomcat应用的持续交付

    https://www.jianshu.com/p/fca8f91ae223 在做持续交付这件事,想必大家都是用jenkins这款程序来做基石.当然,我们这次也是用jenkins作为承载工具,jenk ...

  3. sqlalchemy常用语法

    一.新增数据 # 新增一条数据 user_obj = User(name="bigberg", passwd="twgdh123") Session.add(u ...

  4. Hadoop生态圈-Hive的自定义函数之UDTF(User-Defined Table-Generating Functions)

    Hadoop生态圈-Hive的自定义函数之UDTF(User-Defined Table-Generating Functions) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  5. 科学计算三维可视化---Mayavi入门(Mayavi库的基本元素和绘图实例)

    一:Mayavi库的基本元素 .处理图形可视化和图形操作的mlab模块 .操作管线对象,窗口对象的api (一)mlab模块 (二)mayavi的api 二:快速绘图实例 (一)mlab.mesh的使 ...

  6. bzoj千题计划106:bzoj1014 [JSOI2008]火星人prefix

    http://www.lydsy.com/JudgeOnline/problem.php?id=1014 两个后缀的最长公共前缀:二分+hash 带修改带插入:splay维护 #include< ...

  7. Nginx模块Lua-Nginx-Module学习笔记(二)Lua指令详解(Directives)

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis Nginx与Lua编写脚本的基本构建块是指令. 指令用于指定何时运行用户Lua代码以及如何使用结果. 下 ...

  8. 遇到can not resolve app 依赖包的问题

    1.第一种解决方式:build->sdkmannger->sdk tool ->安装android support responsitory和google responsitory ...

  9. APScheduler定时执行外加supervisor管理后台运行

    最近写的天气爬虫想要让它在后台每天定时执行,一开始用的celery,但不知道为什么明明设置cron在某个时间运行,但任务却不间断的运行.无奈转用apscheduler,但是不管怎么设置都不能使得当调用 ...

  10. markdown小记(语法+markdownpad)

    一.有道云笔记markdown语法小记 1.目录[TOC] 2.标题# 一级标题## 二级标题...###### 六级标题 3.项目列表有序列表: 1. 1. (显示为i.) 2. 3. - (显示为 ...