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

 <!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. 51NOD 1445 变色DNA

    1445 变色DNA 有一只特别的狼,它在每个夜晚会进行变色,研究发现它可以变成N种颜色之一,将这些颜色标号为0,1,2...N-1.研究发现这只狼的基因中存在一个变色矩阵,记为colormap,如果 ...

  2. P4394 [BOI2008]Elect 选举

    P4394 [BOI2008]Elect 选举 题目描述 N个政党要组成一个联合内阁,每个党都有自己的席位数. 现在希望你找出一种方案,你选中的党的席位数要大于总数的一半,并且联合内阁的席位数越多越好 ...

  3. 微信图片上传，遇到一个神奇的jgp

    微信图片上传,获取图片base64遇到一个神奇的   jgp var imgFn = function (event) { event.preventDefault(); var id = '#'+$ ...

  4. 七、Kafka 用户日志上报实时统计之编码实践

    一.数据生产实现 1.配置数据生产模块 项目基础配置所包含的内容,如下所示: •项目工程的文件配置 •集群连接信息配置 •开发演示 2.实现 Flume 到 Kafka 模块 实现 Flume 到 K ...

  5. 微信 js-sdk

    使用方法 http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html Demo http://203.195.235.7 ...

  6. java学习第01天（搭建环境配置）

    搭建环境配置分为3个步骤 1.下载并安装 jdk使用1.8.0_151版本,下载地址(包含32位和64位):链接:https://pan.baidu.com/s/1qZau8oO 密码:0t5o 2. ...

  7. 基本控件文档-UISlider属性

    CHENYILONG Blog 基本控件文档-UISlider属性 Fullscreen     UISlide属性技术博客http://www.cnblogs.com/ChenYilong/ 新浪微 ...

  8. HDU 2095 find your present (2) 动态链表

    解题报告:输入一个n,后面紧跟着输入n个数,输入的这n个数中,除了有一个数的个数为奇数外,其它的数的个数都是偶数个,现在要你找出这个个数为奇数的这个数. 看起来好像很简单的样子,不过,这题的重点不在这 ...

  9. llg的农场(farm)

    评测传送门 [题目描述] llg 是一名快乐的农民,他拥有一个很大的农场,并且种了各种各样的瓜果蔬菜,到了每年秋天,他就可以把所有蔬菜水果卖到市场上,这样他就可以获利.但今年他遇到了一个难题——有许多 ...

  10. 18、Random类简介

    Random类概述 Random类在java.util包下,使用这个类可以生成随机数 package com.sutaoyu.usually_class; import java.util.Rando ...