也是刚开始接触移动前端，大虾别喷

 <!DOCTYPE HTML>

 <html>

 <head>

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

     <title>HTML5测试</title>

     <script src="/Content/JS/jquery-1.10.2.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function() {

             var startX, startY, endX, endY;

             var showADID = 1;

             document.getElementById("divADBox").addEventListener("touchstart", touchStart, false);

             document.getElementById("divADBox").addEventListener("touchmove", touchMove, false);

             document.getElementById("divADBox").addEventListener("touchend", touchEnd, false);

             function touchStart(event) {

                 var touch = event.touches[0];

                 startY = touch.pageY;

                 startX = touch.pageX;

             }

             function touchMove(event) {

                 var touch = event.touches[0];

                 //endY = (startY - touch.pageY);

                 endX = touch.pageX;

             }

             function touchEnd(event) {

                 $("#img0" + showADID).hide();

                 showADID++;

                 if (showADID > 4) {

                     showADID = 1;

                 }

                 if ((startX - endX) > 100) {

                     $("#img0" + showADID).show();

                 }

                 $("#spText").html("X轴移动大小：" + (startX - endX));

             }

         })

     </script>

 </head>

 <body >

     <form id="form1">

     <div style="border:solid 1px Red;" id="divADBox">

     <span id="spText">X轴移动大小：0</span>

         <img id="img01" src="/Content/Images/1.gif"  />

         <img id="img02" src="/Content/Images/2.gif" style="display:none;" />

         <img id="img03" src="/Content/Images/3.gif" style="display:none;" />

         <img id="img04" src="/Content/Images/4.gif" style="display:none;" />

     </div>

     </form>

 </body>

 </html>

HTML5移动应用左右滑动touchmove touchmove touchend 实例的更多相关文章

  1. HTML5触摸事件(touchstart、touchmove和touchend) （转）

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  2. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  5. HTML5触摸事件(touchstart、touchmove和touchend)

      HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事 ...

  6. javaScript -- touch事件详解（touchstart、touchmove和touchend）

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  7. 移动端开发touchstart，touchmove，touchend事件详解和项目

    移动端开发touchstart,touchmove,touchend事件详解和项目 最近在做移动端的开发,在一个“服务商管理”页面使用到了触摸事件"touchstart",&quo ...

  8. mousedown、mousemove、mouseup和touchstart、touchmove、touchend

    拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touch ...

  9. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

随机推荐

  1. .Net Framework4.0 ashx页面报错:检测到有潜在危险的Request.Form值

    前些日子做项目的时候遇到一个问题,在ASP.NET 中使用JQuery的AJAX调用一般处理程序ashx出错,在处理程序中错误提示如下:从客户端(Text="<img alt=&quo ...

  2. saltsack自动化配置day03：服务部署mysql部署

    一.MySQL集群需求分享 1.抽象:功能模块 把基础的写成通用 服务部署也要抽象出来模块 redis内存有的多,有的少,可以config set在线更改 redis 安装.配置.启动 mysql 安 ...

  3. 贪心问题：区间覆盖 NYOJ 喷水装置（二）

    喷水装置(二) 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 有一块草坪,横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n(n<=10000)个点状的喷水 ...

  4. Django 2.0.1 官方文档翻译: 文档目录 (Page 1)

    Django documentation contents 翻译完成后会做标记. 文档按照官方提供的内容一页一页的进行翻译,有些内容涉及到其他节的内容,会慢慢补上.所有的翻译内容按自己的理解来写,尽量 ...

  5. 新建springboot项目启动出错 Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.

    错误信息入下: 2018-06-23 01:48:05.275 INFO 7104 --- [ main] o.apache.catalina.core.StandardService : Stopp ...

  6. Android SDK更新失败对策

    Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xml Failed to fetch URL https:// ...

  7. hive介绍

    我最近研究了hive的相关技术,有点心得,这里和大家分享下. 首先我们要知道hive到底是做什么的.下面这几段文字很好的描述了hive的特性: 1.hive是基于Hadoop的一个数据仓库工具,可以将 ...

  8. Android 5.0 最应该实现的8个期望

    毫无疑问,Android 5 将是令人兴奋的操作系统,因为 Android4.0 至 4.4 版本之间并没有显著的差异,显然谷歌会在 5.0 版本中进行一些较大幅度的革新.那么,代号为“柠檬芝士蛋糕” ...

  9. jQuery UI dialog 使用记录

    1 属性 1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口.当属性为false的时候,一开始隐藏窗口,知道.dialog("open&q ...

  10. ArcGis数据分类(ClassBreaksDefinition)

    文章转载自:Arcgis数据分类那些事儿 数据分类.地图分级(Classification)通常用于Choropleth Map(面量图)的制作中,是专题制图中最初,也是最基本的一个步骤.没有进行过分 ...