js-触屏滑动判断滑动方向(移动版)
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
//如果滑动距离太短
if(Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
var angle = getAngle(angx, angy);
if(angle >= -135 && angle <= -45) {
result = 1;
} else if(angle > 45 && angle < 135) {
result = 2;
} else if((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if(angle >= -45 && angle <= 45) {
result = 4;
}
return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch(direction) {
case 0:
alert("未滑动!");
break;
case 1:
alert("向上!")
break;
case 2:
alert("向下!")
break;
case 3:
alert("向左!")
break;
case 4:
alert("向右!")
break;
default:
}
}, false);
js-触屏滑动判断滑动方向(移动版)的更多相关文章
- html5 touch事件实现触屏页面上下滑动(二)
五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...
- 用HTML和javascript(JS)计算触屏手机手指滑动方向的演示
移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js ...
- js触屏事件
js的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend.这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标. touchstart在触摸开始 ...
- 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener
使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...
- html5 touch事件实现触屏页面上下滑动(一)
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...
- JavaScript触屏滑动API介绍
随着触屏手机.平板电脑的普及和占有更多用户和使用时间,触屏的触碰.滑动等事件也成为javaScript开发不可避免的知识,现在何问起就和大家一起学习js的触屏操作,js的触屏touchmove事件,为 ...
- JS移动客户端--触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
随机推荐
- python 类的封装/property类型/和对象的绑定与非绑定方法
目录 类的封装 类的property特性 类与对象的绑定方法与非绑定方法 类的封装 封装: 就是打包,封起来,装起来,把你丢进袋子里,然后用绳子把袋子绑紧,你还能拿到袋子里的那个人吗? 1.隐藏属性和 ...
- 补之前 如何改变jupyter打开文件的路径
目录 如何改变jupyter打开文件的路径 第一种方法: 第二种方法 第三种方法 如何改变jupyter打开文件的路径 当我们直接打开jupyter时,直接加载的是我们的C盘文件 现在我们想打开其他盘 ...
- (转)git常见错误
error: src refspec master does not match any. 引起该错误的原因是,目录中没有文件,空目录是不能提交上去的 error: insufficient pe ...
- printk的使用技巧
在 linux/kernel.h 中有相应的宏对应. #define KERN_EMERG "<0>" /* system is unusable */#d ...
- poj 2376 选择工作区间问题 贪心算法
题意:给一些工作区间,如何选取最小的工作数量,覆盖[1,T]的工作时长 一开始的思路,当然也是错误的思路: 我想着,最小工作数量是吧?那肯定就是选择结束时间最晚的,给结束时间来一个排序.哎这个思路错误 ...
- 如何固定电脑IP
百度经验里有:http://jingyan.baidu.com/article/2f9b480d579fc041cb6cc297.html 但是就关于如何填写DNS时,就不知道咋办了,特意问了一下IT ...
- ADB命令后台修改系统默认输入法
今天要研究uiautomator如何输入中文,看网上有一种常用的解决办法:http://www.cnblogs.com/yajing-zh/p/5125387.html在这篇博客最后提出来的问题,也是 ...
- BZOJ 4057: [Cerc2012]Kingdoms
状压DP #include<cstdio> #include<cstring> using namespace std; int F[1200005],A[25][25],st ...
- HDU 5510 Bazinga KMP
题意: 给\(n(1 \leq n \leq 500)\)个字符串,求一个最大的\(i\),使得存在一个\(S_{j}\)不是\(S_i\)的子串. 分析: 维护两个指针\(l,r\) 那么有两种情况 ...
- LA 5007 Detector Placement 模拟
题意: 给出一束光线(射线),和一块三角形的棱镜 以及 棱镜的折射率,问光线能否射到X轴上,射到X轴上的坐标是多少. 分析: 其实直接模拟就好了,注意到题目中说不会发生全反射,所以如果射到棱镜中的话就 ...