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

 <!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. Java基础-面向对象第一特性之封装(Encapsulation)

    Java基础-面向对象第一特性之封装(Encapsulation) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.理解什么是面向过程和面向对象 面向过程与面向对象都是我们编程中 ...

  2. SFTP上传下载文件、文件夹常用操作

    SFTP上传下载文件.文件夹常用操作 1.查看上传下载目录lpwd 2.改变上传和下载的目录(例如D盘):lcd  d:/ 3.查看当前路径pwd 4.下载文件(例如我要将服务器上tomcat的日志文 ...

  3. JedisCluster实践

    1. Spring中运用JedisCluster http://blog.csdn.net/u010739551/article/details/52438101[spring集成 JedisClus ...

  4. [转载]学习C语言基本思路与参考书籍

    http://zhuanlan.zhihu.com/linjr/19694823 计算机行业发展非常快,大学里的教育基本都跟不上实际的社会需求.如果你所在的学校还在指定大家使用谭浩强的教材,或使用VC ...

  5. 解决组合排列问题 A (m ,n) m>=n

    转载自http://blog.csdn.net/sunyujia/article/details/4124011 从n个不同元素中任取m(m≤n)个元素,按照一定的顺序排列起来,叫做从n个不同元素中取 ...

  6. Macaca(一) - 环境配置

    Macaca是阿里提供的一套自动化测试框架,目前已开源. 花了两三个小时研究了一下Macaca的实现原理.因为很好奇它与appium.selenium有啥区别. 实现原理本质上与selenium的we ...

  7. python作业堡垒机(第十三周)

    作业需求: 1. 所有的用户操作日志要保留在数据库中 2. 每个用户登录堡垒机后,只需要选择具体要访问的设置,就连接上了,不需要再输入目标机器的访问密码 3. 允许用户对不同的目标设备有不同的访问权限 ...

  8. java_环境安装（window10）

    参考地址 下载JDK 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 本地环境变 ...

  9. 假·最大子段和 (sdutoj 4359 首尾相连)(思维)

    题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Contest/contestproblem/cid/2736/pid/4359 具体思 ...

  10. 自然语言处理词向量模型-word2vec

    自然语言处理与深度学习: 语言模型: N-gram模型: N-Gram模型:在自然语言里有一个模型叫做n-gram,表示文字或语言中的n个连续的单词组成序列.在进行自然语言分析时,使用n-gram或者 ...