|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?注册
x
移动端触摸滑动原理详解案例,实现过程通过添加DOM标签的触摸事件监听,并计算触摸距离,通过距离坐标计算触摸角度,最后通过触摸角度去判断往哪个方向触摸的。
触摸的事件列表
触摸的4个事件:
touchstart 触摸屏幕上时触发
touchmove 触摸屏幕中滑动时触发
touchend 离开屏幕时触发
touchcancel 系统取消触摸事件的时候触发
监听触摸后触摸事件会实现一个event对象,这个对象里面包括3个触摸函数列表。
触摸事件里的3个函数:
touches 屏幕上所有手指列表
targetTouches 在当前DOM标签上手指的列表
changedTouches 涉及当前事件的手指的列表
触摸函数的属性,用于获取坐标
8个属性:
clientX 触摸目标在浏览器中的x坐标
clientY 触摸目标在浏览器中的y坐标
identifier 标识触摸的唯一ID。
pageX 触摸目标在当前DOM中的x坐标
pageY 触摸目标在当前DOM中的y坐标
screenX 触摸目标在屏幕中的x坐标
screenY 触摸目标在屏幕中的y坐标
target 触摸的DOM节点目标。
Math.atan2()函数,计算角度的弧度值
angel=Math.atan2(y,x)
x 指定点的 x 坐标
y 指定点的 y 坐标
angel是一个弧度值(可以比喻为直角三角形对角的角,其中 x 是邻边边长,而 y 是对边边长)
atan2(x,y)*180/Math.PI 转换为角度
触摸详细代码:
touch test
<script> //定义变量,用于记录坐标和角度 var startx,starty,movex,movey,endx,endy,nx,ny,angle; //开始触摸函数,event为触摸对象 function touchs(event){ //阻止浏览器默认滚动事件 event.preventDefault(); //获取DOM标签 var box = document.getElementById('box'); //通过if语句判断event.type执行了哪个触摸事件 if(event.type=="touchstart"){ console.log('开始'); //获取开始的位置数组的第一个触摸位置 var touch = event.touches[0]; //获取第一个坐标的X轴 startx = Math.floor(touch.pageX); //获取第一个坐标的X轴 starty = Math.floor(touch.pageY); //触摸中的坐标获取 }else if(event.type=="touchmove"){ console.log('滑动中'); var touch = event.touches[0]; movex = Math.floor(touch.pageX); movey = Math.floor(touch.pageY); //当手指离开屏幕或系统取消触摸事件的时候 }else if(event.type == "touchend" || event.type == "touchcancel"){ //获取最后的坐标位置 endx = Math.floor(event.changedTouches[0].pageX); endy = Math.floor(event.changedTouches[0].pageY); console.log('结束'); //获取开始位置和离开位置的距离 nx = endx-startx; ny = endy-starty; //通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI angle = Math.atan2(ny, nx) * 180 / Math.PI; if(Math.abs(nx) |
-
|