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

 <!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. 科学计算三维可视化---TraitsUI（控件）

    一:文本编辑器 from traits.api import HasTraits,Int,Str,Password from traitsui.api import View,Item,Group,M ...

  2. Python之路,Day2 - Python基础，列表，循环

    1.列表练习name0 = 'wuchao'name1 = 'jinxin'name2 = 'xiaohu'name3 = 'sanpang'name4 = 'ligang' names = &quo ...

  3. Java并发编程原理与实战八：产生线程安全性问题原因（javap字节码分析）

    前面我们说到多线程带来的风险,其中一个很重要的就是安全性,因为其重要性因此,放到本章来进行讲解,那么线程安全性问题产生的原因,我们这节将从底层字节码来进行分析. 一.问题引出 先看一段代码 packa ...

  4. 一道非常易错的js面试题

    题目如下: function Foo() { getName = function() { alert(1); }; return this; } Foo.getName = function() { ...

  5. [转载]jsonp详解

    http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到, ...

  6. 20155307 2016-2017-2 《Java程序设计》第七周学习总结

    学号 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 认识Lambda语法,方法参考在重用现有API上扮演了重要角色,重用现有方法操作,可避免到处写下Lamb ...

  7. Python练习-Property的用法

    # 编辑者:闫龙 #要求一:自定义用户信息数据结构,写入文件,然后读出内容,利用eval重新获取数据结构 with open('user.db','w') as write_file:#创建并以写入的 ...

  8. ES6的优雅方法

    1.箭头函数 // ES5 var selected = allJobs.filter(function (job) { return job.isSelected(); }); // ES6 var ...

  9. hdu 1251 统计难题（字典树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1251 统计难题 Time Limit: 4000/2000 MS (Java/Others)    M ...

  10. golang的json序列化

    json就是简单的数据交换格式,语法类似javascript的对象和列表,是最常见的后端和运行在网页上的js之间的通信格式. encoding: 编码json数据需要使用到Marshal()函数. f ...