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

  1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  5.      <title>HTML5测试</title>
  6.      <script src="/Content/JS/jquery-1.10.2.min.js" type="text/javascript"></script>
  7.      <script type="text/javascript">
  8.          $(function() {
  9.              var startX, startY, endX, endY;
  10.              var showADID = 1;
  11.              document.getElementById("divADBox").addEventListener("touchstart", touchStart, false);
  12.              document.getElementById("divADBox").addEventListener("touchmove", touchMove, false);
  13.              document.getElementById("divADBox").addEventListener("touchend", touchEnd, false);
  14.              function touchStart(event) {
  15.                  var touch = event.touches[0];
  16.                  startY = touch.pageY;
  17.                  startX = touch.pageX;
  18.              }
  19.              function touchMove(event) {
  20.                  var touch = event.touches[0];
  21.                  //endY = (startY - touch.pageY);
  22.                  endX = touch.pageX;
  23.              }
  24.              function touchEnd(event) {
  25.                  $("#img0" + showADID).hide();
  26.                  showADID++;
  27.                  if (showADID > 4) {
  28.                      showADID = 1;
  29.                  }
  30.                  if ((startX - endX) > 100) {
  31.                      $("#img0" + showADID).show();
  32.                  }
  33.                  $("#spText").html("X轴移动大小：" + (startX - endX));
  34.              }
  35.          })
  36.      </script>
  37.  </head>
  38.  <body >
  39.      <form id="form1">
  40.      <div style="border:solid 1px Red;" id="divADBox">
  41.      <span id="spText">X轴移动大小：0</span>
  42.          <img id="img01" src="/Content/Images/1.gif"  />
  43.          <img id="img02" src="/Content/Images/2.gif" style="display:none;" />
  44.          <img id="img03" src="/Content/Images/3.gif" style="display:none;" />
  45.          <img id="img04" src="/Content/Images/4.gif" style="display:none;" />
  46.      </div>
  47.      </form>
  48.  </body>
  49.  </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. Docker简介与安装配置

    目录 Docker简介 什么是Docker 为啥要用容器 Docker Engine Docker架构说明 Docker安装 Docker版本介绍 Ubuntu安装docker-ce CentOS7安 ...

  2. oracle表结构和数据导出时的一些勾选项说明

    使用pl/sql developer导出oracle数据库的表结构和表数据时,有一些勾选项供用户选择,需要用户根据实际情况进行勾选或取消. 导出方法如下:一.只导出表结构1.使用pl/sql deve ...

  3. SXOI2018 游记

    noilinux@Capella:~$ cd /Memories/ noilinux@Capella:/Memories$ rm *SXOI* rm:是否删除有写保护的普通文件 "SXOI2 ...

  4. css 系统自学笔记2017-12-04

    一.几个常用的可以连写的样式属性 1.backgroud: 背景连写:没有先后顺序,都是可选的. 2.font字体属性连写: font: 二.元素分类 块级元素:div p h1~h6 ul li o ...

  5. [整理]基于bootstrap的文本编辑器

    http://www.bootcss.com/p/bootstrap-wysiwyg/ http://jhollingworth.github.io/bootstrap-wysihtml5/ http ...

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

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

  7. Python练习-天已经亮了计算器也终于完成了

    # 编辑者:闫龙 import re #导入re模块(正则表达式) calc2 = "1-2*((60-30+(-40/52)*(9-2*5/3+7/3*-99/4*2998+10*568/ ...

  8. Ping程序的实现

    Ping程序的实现 在windows系统下进行cmd可以进行ping操作. ping命令是用来确定本地主机与网络中其他主机的网络通信情况,或者查看是否是为效IP. ping的工作原理:网络另一主机发送 ...

  9. python 中的__del__

    # -*- coding: utf-8 -*- # @Time : 2018/9/19 20:21 # @Author : cxa # @File : delDemo.py # @Software: ...

  10. 通过`__slots__` 节省RAM

    标签(空格分隔): Python进阶 python中,由于创建每个实例都会有成员,这些成员都会被保存在dict中,但是Python不能静态分配RAM,当创建实例时,因此dict的大小会比所需要的内存大 ...