javascript判断移动应用手势滑动屏幕方向

方案思路：

1、滑动屏幕事件使用HTML5 的 touchstart 滑动开始事件和 touchend 滑动结束事件。

2、方向的判断，以起点做平面坐标系，与终点连线做直线，直线与x正半轴计算角度；我们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度，则判断它方向为向上滑。

3、使用Math.atan2()来计算起点与终点形成的直线角度。

4、仔细对比标准坐标系与屏幕坐标系，我们发现，标准坐标系，上半轴为负值，要实现转换，只需要调换Y坐标起点与终于位置即可。

代码实现：

[网上参考]：http://m.blog.csdn.net/blog/u011004053/33741859

时间： 2024-12-19 22:08:27

javascript判断移动应用手势滑动屏幕方向的相关文章

移动应用滑动屏幕方向判断解决方案,JS判断手势方向

问题分类滑动屏幕打开相应功能操作. 问题描述 1.用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题. 2.大家都知道,划动都有角度问题,如:向330度方向滑动手机,要计算出它的方向问题. 3.HTML5提供的滑动事件,只能读取到起点和终点坐标,计算角度问题. 4.手机屏幕坐标与标准坐标系转换问题. 解决方案 1.滑动屏幕事件使用HTML5 的touchstart滑动开始事件和touchend滑动结

关于手机端手势滑动的方向的判断（方式一）

滑动屏幕 touchstart:接触屏幕时触发,touchmove:活动过程触发,touchend:离开屏幕时触发首先获取手接触屏幕时的坐标X,Y //获取接触屏幕时的X和Y $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); 然后获取滑动的坐标,并使用

移动端判断手势滑动的方向

<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

javascript判断是否手机设备+滑动事件

//判断是否手机端 var isMobile = false; try { //手机端 document.createEvent("TouchEvent"); isMobile = true; } catch (e) { //pc } //手势事件 var startX = 0, endX = 0, move_left = null; //按下时触发 $('元素').on('touchstart', function (e) { e.preventDefault() var touch

H5案例分享：移动端touch事件判断滑屏手势的方向

移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 思路:用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动:X的结果如果负数,则说明手指是从右往左划动:Y的结果如果正数,则说明手指是从

ios开发过程中屏幕方向判断的问题

判断屏幕的方法有很多着及仅提供几个我个人认为好用的方案 Landscape 竖屏 Portrait 横屏最有效的方法是: 在willRotateToInterfaceOrientation:duration: 方法中将方向存储起来: DrviceOrientation = toInterfaceOrientation; 然后在别的方法中使用相应的屏幕的方向方法一: 直接获取设备的方法:self.interfaceOrientation(此方法已经过期) 方法二: 通过下面的方法: UIDev

Android监测手指上下左右滑动屏幕

在开发android程序时,有时会需要监测手指滑动屏幕,当手指朝上下左右不同方向滑动时做出不同的响应,那怎么去实现呢? 利用Android提供的手势监测器就可以很方便的实现,直接上代码(已测试通过) public class CbMainActivity extends Activity implements android.view.GestureDetector.OnGestureListener { //定义手势检测器实例 GestureDetector detector; @Overri

iOS之手势滑动返回功能－b

iOS中如果不自定义UINavigationBar,通过手势向右滑是可以实现返回的,这时左边的标题文字提示的是上一个ViewController的标题,如果需要把文字改为简约风格,例如弄过箭头返回啥的,那么你需要自定义UINavigationBar,但当你自定义navigationBar后,这个功能就会自动失效. 屏蔽右滑返回功能代码: if ([self.navigationController respondsToSelector:@selector(interactivePopGest

Android-通过SlidingMenu高仿微信6.2最新版手势滑动返回(二)

转载请标明出处: http://blog.csdn.net/hanhailong726188/article/details/46453627 本文出自:[海龙的博客] 一.概述在上一篇博文中,博文地址Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一),我们是通过官方自带的SlidingPaneLayout来实现的手势滑动返回.在这篇博文中,我们将採用SlidingMenu来高仿. 事实上实现的原理都一样.仅仅只是是把SlidingPaneLayout