用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
来源:互联网 发布:人工智能大会2017 编辑:程序博客网 时间:2024/05/17 22:29
原文:http://www.cnblogs.com/liughost/archive/2014/09/02/3951949.html
移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别。下面给出具体实现的例子,供大家参考。
将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js事件:
1、touchstart---手指开始触摸事件,此事件可以获取起始坐标,将起始坐标保存在pressX 和pressY 中。
2、touchmove---手机触摸移动时间,只要手机不离开指定元素,就不停的将手机的新坐标通过事件发给页面上的js代码。通过计算此事件获取的当前坐标与起始坐标的差,就可以知道手指移动的方向,本演示中识别了四个方向(上、下、左、右),有兴趣的可以计算出更多的方向。
3、touchend---这个事件暂时没有使用到。
本例的演示地址:http://deanx.cn/demo/touch/touch.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>触屏手指滑动计算演示--程序员老刘</title></head><body style="font-size:32px;"><div style="width:100%"><h2>触屏手指滑动方向计算演示</h2><div id="region" style="background-color:yellow;width:100%;height:50%"></div>起始坐标<br/><input id="touchStart" style="font-size: 48px;"/><br/>结果计算<br/><input id="touchMove" style="font-size: 48px;"/></div><script type="text/javascript">/* * 作者:程序员老刘 * 功能:计算手指在指定标签上的滑动的方向 */ var tagId = "region"; var pressX = 0, pressY = 0; var obj = document.getElementById(tagId); obj.addEventListener('touchmove', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; var spanX = touch.pageX - pressX; var spanY = touch.pageY - pressY; var direct = "none"; if (Math.abs(spanX) > Math.abs(spanY)) { //水平方向 if (spanX > 0) { direct = "right";//向右 //do right function } else { direct = "left";//向左 //do left function } } else { //垂直方向 if (spanY > 0) { direct = "down";//向下 //do down function } else { direct = "up";//向上 //do up function } } // 把元素放在手指所在的位置 touchMove.value = direct + "(" + spanX + ';' + spanY + ")"; } }, false); obj.addEventListener('touchstart', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 pressX = touch.pageX; pressY = touch.pageY; touchStart.value = pressX + ';' + pressY; } }, false); /* obj.addEventListener('touchend', function(event) { // 如果这个元素的位置内只有一个手指的话 if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 touchEnd.value=touch.pageX + ';' + touch.pageY; } }, false); */</script></body></html>
扫描下面的二维码试试!
0 0
- 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
- 触屏手指滑动计算演示
- 触屏手指滑动计算演示
- 移动端js判断手指滑动方向
- unity3D中如何分别获取pc端鼠标的滑动方向和andriod移动平台上手指的滑动方向?
- js判断手指滑动方向(移动端)
- 移动端网页判断手指触摸滑动的方向
- 封装判断touch手指滑动方向的函数
- 一个模拟手机手指滑动事件的jquery插件
- js 手机触屏滑动置顶
- Android studio开发中,监控手指的滑动方向,并做出相应的响应事件
- 手指的方向……
- 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向
- Android平台的事件处理机制和手指滑动例子
- Android平台的事件处理机制和手指滑动例子
- Android平台的事件处理机制和手指滑动例子
- Android平台的事件处理机制和手指滑动例子
- Android平台的事件处理机制和手指滑动例子
- 【c#入门学习】head first c#赛狗日
- 项目pom文件依赖问题
- Spring4.36 Test框架加上Junit4.12所遇到的问题和使用
- django 前后台交互plus
- Tab初始化时如何让特定的Tab处于选中状态
- 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
- 重温KMP
- 数组与指针的区别
- HTML5本地存储:SessionStorage, LocalStorage, Cookie
- 关键词分析和查找工具
- 装饰者模式
- iOS下WebService接口调用与解析-一、Soap对象的封装
- 【ArcGIS 10.5 产品白皮书】第一章 走近ArcGIS平台2
- Qt:在程序中获取源码被编译的日期和时间