码迷,mamicode.com
首页 > 移动开发 > 详细

js判断元素滑动方向(上下左右)移动端

时间:2017-06-22 16:43:41      阅读:346      评论:0      收藏:0      [点我收藏+]

标签:add   class   www   起点   event   switch   mat   rtx   code   

每天学习一点点。

1
var startx, starty; 2 //获得角度 3 function getAngle(angx, angy) { 4 return Math.atan2(angy, angx) * 180 / Math.PI; 5 }; 6 7 //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动 8 function getDirection(startx, starty, endx, endy) { 9 var angx = endx - startx; 10 var angy = endy - starty; 11 var result = 0; 12 13 //如果滑动距离太短 14 if (Math.abs(angx) < 2 && Math.abs(angy) < 2) { 15 return result; 16 } 17 18 var angle = getAngle(angx, angy); 19 if (angle >= -135 && angle <= -45) { 20 result = 1; 21 } else if (angle > 45 && angle < 135) { 22 result = 2; 23 } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { 24 result = 3; 25 } else if (angle >= -45 && angle <= 45) { 26 result = 4; 27 } 28 29 return result; 30 } 31 //手指接触屏幕 32 document.addEventListener("touchstart", function(e) { 33 startx = e.touches[0].pageX; 34 starty = e.touches[0].pageY; 35 }, false); 36 //手指离开屏幕 37 document.addEventListener("touchend", function(e) { 38 var endx, endy; 39 endx = e.changedTouches[0].pageX; 40 endy = e.changedTouches[0].pageY; 41 var direction = getDirection(startx, starty, endx, endy); 42 switch (direction) { 43 case 0: 44 alert("未滑动!"); 45 break; 46 case 1: 47 alert("向上!") 48 break; 49 case 2: 50 alert("向下!") 51 break; 52 case 3: 53 alert("向左!") 54 break; 55 case 4: 56 alert("向右!") 57 break; 58 default: 59 } 60 }, false);

原文地址:http://www.cnblogs.com/beiz/p/5817192.html

js判断元素滑动方向(上下左右)移动端

标签:add   class   www   起点   event   switch   mat   rtx   code   

原文地址:http://www.cnblogs.com/Mrrabbit/p/7065441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!