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

 <!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. UITextView默认文字提示

    在UITextField中自带placeholder属性,可以用于提示输入框信息.但是UITextView并不具备此功能介绍两种方法来实现:第一种:初始化UITextView//首先定义UITextV ...

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

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

  3. 2017 清北济南考前刷题Day 1 afternoon

    期望得分:80+30+70=180 实际得分:10+30+70=110 T1 水题(water) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK出了道水 ...

  4. 穷竭搜索：POJ 3187 Backward Digit Sums

    题目:http://poj.org/problem?id=3187 题意: 像这样,输入N : 表示层数,输入over表示最后一层的数字,然后这是一个杨辉三角,根据这个公式,由最后一层的数,推出第一行 ...

  5. Android SDK更新失败对策

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

  6. jdk1.8.0_45源码解读——ArrayList的实现

    jdk1.8.0_45源码解读——ArrayList的实现 一.ArrayList概述 ArrayList是List接口的可变数组的实现.实现了所有可选列表操作,并允许包括 null 在内的所有元素. ...

  7. 选择Memcached还是Redis？

    两者相似之处 Memcached与Redis都属于内存内.键值数据存储方案.它们都从属于数据管理解决方案中的NoSQL家族,而且都基于同样的键值数据模型.双方都选择将全部数据保存在内存当中,这自然也就 ...

  8. 对某道ctf的一点点记录

    题目:http://ctf5.shiyanbar.com/web/pcat/index.php 是一道注入的题,主要利用了offset 和 group by with rollup的知识 1.offs ...

  9. NYOJ 123 士兵杀敌（四） （线段树）

    题目链接 描述 南将军麾下有百万精兵,现已知共有M个士兵,编号为1~M,每次有任务的时候,总会有一批编号连在一起人请战(编号相近的人经常在一块,相互之间比较熟悉),最终他们获得的军功,也将会平分到每个 ...

  10. 关于注入抽象类报could not autowire field的问题

    昨天工作中遇到了一个很奇葩的问题,之前一直都没考虑过抽象类这块,一直用的注入接口实现类: 先看下错误: 因为在类中注入了一个抽象类,之前只有一个继承子类,所以没问题,这里要说一下抽象类的实例化: 抽象 ...