移动开发学习touchmove
<!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的更多相关文章
- Android开发学习之路-RecyclerView滑动删除和拖动排序
Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Android开发学习路线图
Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...
- NET开发学习项目资源（2）
NET开发学习项目资源 击标题链接即可下载. 目录: 1.征婚交友网站 前台交友信息和后台会员管理两大部分组成. 前台功能模块 该模块主要包括查询交友信息.显示交友信息.会员登录.会员信息管理.修改会 ...
- Civil 3D API二次开发学习指南
Civil 3D构建于AutoCAD 和 Map 3D之上,在学习Civil 3D API二次开发之前,您至少需要了解AutoCAD API的二次开发,你可以参考AutoCAD .NET API二次开 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 【前端】移动端Web开发学习笔记【1】
下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...
- .net 网站开发学习资源
慕课网 前端基础学习 http://www.imooc.com/course/list?c=fe 了解需求 例子之一 http://wenku.it168.com/d_000517899.shtml ...
- 驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址
驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址 最近重新看了乾龙_Heron的<ARM 上电启动及 Uboot 代码分析>(下简称<代码分析>) ...
随机推荐
- weblogic threadpool has stuck threads
https://blog.csdn.net/wyx713510713/article/details/12705221 最近项目启动时出问题,weblogic的nohup日志文件中找到下面一段(红色部 ...
- Hibernate框架学习笔记
Hibernate 是一个 JDO( Java Data Objects)工具.它的工作原理是通过文件把值对象(Java对象)和 数据库表之间建立起一个映射关系,还提供数据查询和获取数据的方法. ...
- spring xml头文件xmlns和xsi的意思
在spring的配置中,总能看见如下的代码: <beans xmlns="http://www.springframework.org/schema/beans" xmlns ...
- vue 添加子路由，并对路由重定向
// 用户信息首页 { path: '/user/index', name: 'userIndex', component: userIndex, redirect: '/user/index/sho ...
- 访问注解（annotation）的几种常见方法
java的注解处理器类主要是AnnotatedElement接口的实现类实现,为位于java.lang.reflect包下.由下面的class源码可知AnnotatedElement接口是所有元素的父 ...
- springboot 日志1
技术交流群: 816227112 Spring Boot在所有内部日志中使用Commons Logging,但是默认配置也提供了对常用日志的支持,如:Java Util Logging,Log4J, ...
- samrty模板变量操作符
count_sentences [计算句数],示例:{$smarty.get.name|count_sentences} count_words [计算词数],示例:{$smarty.get.name ...
- ES6中的Promise使用方法与总结
在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...
- 我的开发小tip
开发原则:1.谁开发,谁负责到底.自己的开发的模块自己维护,不要让别人替你维护,否则很麻烦:2.合理分配时间3.谨慎的处理遇到的bug和问题,不是自己开发的不要轻举妄动,提交到待办中即可4.万勿过度设 ...
- Soa思想分布式服务webservice WCF
什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.以上是百度百科的解释,简单的说,就是一次大的操作由不同的小操作组成,这 ...