js代码

$(function() {

    function judge() {

        var startx;//让startx在touch事件函数里是全局性变量。

        var endx;

        var el = document.getElementById('io');//触摸区域。

        function cons() {   //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。

            if (startx > endx) {  //判断左右移动程序

                alert("left");

            } else {

                alert("right");

            }

        }  

        el.addEventListener('touchstart', function (e) {

            var touch = e.changedTouches;

            startx = touch[].clientX;

            starty = touch[].clientY;

        });

        el.addEventListener('touchend', function (e) {

            var touch = e.changedTouches;

            endx = touch[].clientX;

            endy = touch[].clientY;

            cons();  //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。

        });

    }  

    judge();

})

html随便写就可以  记得id要对应

<body>

    <div style="width: 100%;height: 3000px;background: #08c;" id="io">  

    </div>

</body>

　　

js判断手机的左右滑动的更多相关文章

  1. js判断手机 横屏模式

    js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...

  2. js判断手机浏览器操作系统和微信浏览器的方法

    做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...

  3. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  4. js判断手机浏览器是横屏or竖屏

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...

  5. js判断手机系统和微信

    //判断手机浏览器 var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone = !ipa ...

  6. js判断手机是否安装了某一款app，有则打开，没有去下载

    function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...

  7. JS判断手机横竖屏

    在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...

  8. 【转】js判断手机访问网页

    原理:原理有两个,第一:通过游览器(browser)判断是否是手机:第二:通过访问终端判断是否是手机(userAgent):但是通常考虑到兼容性,需要这两种原理同时使用:具体的实现如下: JS实现: ...

  9. JS判断手机访问跳转到手机站

    这里提供了六种让手机端访问网站跳转到手机端的方法: 第一种: <script> if(navigator.platform.indexOf('Win32')!=-1){ //pc //wi ...

随机推荐

  1. Python Flask搭建一个视频网站实战视频教程

    点击了解更多Python课程>>> Python Flask搭建一个视频网站实战视频教程 第1章 课程介绍 第2章 预备开发环境 第3章 项目分析.建立目录及模型规划 第4章 建立前 ...

  2. php同一个用户同时只能登陆一个, 后登陆者踢掉前登陆者（排他登陆）

    通常用户登陆,如果没有特别的限定, 同一个用户可以同时登陆, 今天搞了一个东西限定一个用户不能同时登陆到一个系统上, 后登陆者会把前面登陆的踢出来.(有点像QQ,同个帐号不能在多个地方同时在线, 后面 ...

  3. 大数据小项目之电视收视率企业项目08--》MapReduce编写之Wordcount

    编程规范 (1)用户编写的程序分成三个部分:Mapper,Reducer,Driver(提交运行mr程序的客户端) (2)Mapper的输入数据是KV对的形式(KV的类型可自定义) (3)Mapper ...

  4. 【python学习】新手基础程序练习（二）

    Ι 继续上一节得内容,这里主要是对各种知识的理解以及如何运用. 一.执行 Python 脚本的两种方式 1.把python执行文件加到计算机的环境变量中,然后新建文件把程序写在新文件里,再通过cmd命 ...

  5. P1880 [NOI1995]石子合并【区间DP】

    题目描述 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. 试设计出1个算法,计算出将N堆石子合并成1 ...

  6. 笔记-python-反射

    笔记-python-反射 1. 反射 在很多地方看到自省和反射,很晕菜,整理了一下相关文档,加深了理解. 自省和反射其实说的是一件事,核心操作是根据输入去对象(模块)中调用(查找/获取/删除/添加)成 ...

  7. Kali 安装VMtools（最新）

    老方法安装的VMtools不能进行主宿切换,下面是kali最新版安装VMtools的方法 一.换国内源&更新源 参考 Kali 2017更新源 二.安装VMtools apt-get inst ...

  8. 全球征集-如何实现回文SQL的查询

    有个表,以下是创建的SQL: CREATE TABLE [dbo].[SysName]( ,) NOT NULL, ) COLLATE Chinese_PRC_CI_AS NULL, ) COLLAT ...

  9. netcfg.exe

    netcfg.exe 编辑 本词条缺少信息栏.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!   目录 1 简介 2 可能出现问题 简介编辑 netcfg.exe是Kaspersky的 ...

  10. 分分钟教你做出自己的新闻阅读APP

    分分钟教你做出自己的新闻阅读APP 引子 曾经不小心发现了一些好的看新闻的网站,但是电脑又不是随身携带,因此想要下载一个这个网站的手机APP来看新闻,但是问题来了,这个网站根本没有做Android端! ...