<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title>touchmove</title>

<style>

#tm{

    position: absolute;

    top: 100px;

    left: 100px;

    width: 100px;

    height: 30px;

    background-color: blue;

    text-align: center;

    line-height: 30px;

    color: white;

}

</style>

</head>

<body>

<div id="tm">touchmove</div>

<script>

var obj = document.getElementById('tm');

obj.addEventListener('touchstart', function(event){

    obj.style.backgroundColor = 'red';

});

obj.addEventListener('touchend', function(event){

    obj.style.backgroundColor = 'blue';

    obj.innerHTML = 'touchmove';

});

obj.addEventListener('touchmove', function(event) {

    event.preventDefault();

    var touch = event.targetTouches[0];

    obj.style.left = touch.pageX-50 + 'px';

    obj.style.top = touch.pageY-50 + 'px';

    obj.innerHTML = 'x:' + touch.pageX + ', y:' + touch.pageY;

}, false);

</script>

</body>

</html>

移动开发学习touchmove的更多相关文章

  1. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  2. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  3. Android开发学习路线图

    Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...

  4. NET开发学习项目资源（2）

    NET开发学习项目资源 击标题链接即可下载. 目录: 1.征婚交友网站 前台交友信息和后台会员管理两大部分组成. 前台功能模块 该模块主要包括查询交友信息.显示交友信息.会员登录.会员信息管理.修改会 ...

  5. Civil 3D API二次开发学习指南

    Civil 3D构建于AutoCAD 和 Map 3D之上,在学习Civil 3D API二次开发之前,您至少需要了解AutoCAD API的二次开发,你可以参考AutoCAD .NET API二次开 ...

  6. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  7. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  8. .net 网站开发学习资源

    慕课网 前端基础学习 http://www.imooc.com/course/list?c=fe 了解需求 例子之一 http://wenku.it168.com/d_000517899.shtml ...

  9. 驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址

    驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址 最近重新看了乾龙_Heron的<ARM 上电启动及 Uboot 代码分析>(下简称<代码分析>) ...

随机推荐

  1. 大数据入门到精通5--spark 的 RDD 的 reduce方法使用

    培训系列5--spark 的 RDD 的 reduce方法使用 1.spark-shell环境下准备数据 val collegesRdd= sc.textFile("/user/hdfs/C ...

  2. dns隧道 dns2tcpd

    有些网络的防火墙设置只允许端口53的UDP流量,就不能通过tcp搭建隧道,这种情况下我们可以通过UDP搭建DNS隧道,通过搭建一个DNS服务器委派的子域,这个子域因为使我们自己搭建的主机,这时候就可以 ...

  3. 解题（PockerCompare-扑克牌比较大小）

    题目描述 扑克牌游戏大家应该都比较熟悉了,一副牌由54张组成,含3~A.2各4张,小王1张,大王1张.牌面从小到大用如下字符和字符串表示(其中,小写joker表示小王,大写JOKER表示大王):3 4 ...

  4. 配置完php.ini中的扩展库后,重启apache出现错误1067

    网上有很多解决办法,比如更改环境变量,重装apache等等,但没有一个是符合我的.最后发现只是犯了一个低级错误,因为是第一次配置php.ini中的扩展库,忘记配置扩展库的路径. 解决办法:需要先加上扩 ...

  5. 基于xtrabackup GDIT方式不锁库作主从同步（主主同步同理，反向及可）

    1.安装数据同步工具 注:xtrabackup 在数据恢复的时候比mysqldump要快很多,特别是大数据库的时候,但网络传输的内容要多,压缩需要占用时间. yum install https://w ...

  6. LightOJ - 1027 Dangerous Maze 期望

    你在迷宫中;开始时在你面前看到n扇门.你可以选择你喜欢的任何门.所有门的选择门的概率是相等的. 如果您选择第i个门,它可以让您回到您在xi(xi小于0)分钟内开始的相同位置,也可以在xi(xi大于0) ...

  7. Disruptor并发框架简介

    Martin Fowler在自己网站上写一篇LMAX架构的文章,在文章中他介绍了LMAX是一种新型零售金额交易平台,它能够以很低的延迟产生大量交易.这个系统是建立在JVM平台上,其核心是一个业务逻辑处 ...

  8. TZOJ 二分图练习

    二分图主要是 1.如何建图,谁匹配谁,怎么匹配 2.判断求的是什么:最大匹配=最小点覆盖,最大独立子集=最小路径覆盖=最小边覆盖=图中顶点数-最大匹配 A.2733:棋盘游戏 描述 小希和Gardon ...

  9. Java中重写与重载的区别

    方法重载:关键字overload,方法名和方法的返回类型都相同,方法参数个数和类型不一样方法重写:也叫方法覆盖,关键字override,相对于类继承而言,重写的方法名,返回类型,参数个数,参数类型都要 ...

  10. c# sharpsvn 客户端开发测试

    1:没有工作副本,上传时会报错的. 会提示本地目录不是not a working copy   而此中文名称就是工作副本, 本地要与svn服务器公用的一个文件夹. 所以每次要checkout 然后才能 ...