手指滑动屏幕原理

//手指按下屏幕的点,抬起手指的点,按下的时间,抬起的时间

var startPoint=0;

endPoint=0;

startTime=0;

   endTime=0;

//touchstart事件

$(".xx").on("touchstart",function(event){

//每次重新滑动要清除上一次手指抬起的位置和时间

endPoint=0;

endtime=0;

startPoint=event.touches[0].clientY;

startTime=Date.now()

})

//touchend事件

$(".xx").on("touchend",function(event){

endPoint=event.touches[0].clientY;

endTime=Date.now()

})

//判断滑动的速度是否超过指定值,超过就触发方法

var speed=(endPonit-startPoint)/[(endtime-starttime)/1000]

*获取的时间是毫秒,得出的速度是小数,所以要转换成秒;

*往上滑动屏幕,两点之间的差永远是负数,所以下面>20或者<-20

*如果要滑动不费力把参考值设置小一点

if(speed>20){

  xx();//调用方法,一般是翻页

}

时间: 2024-10-10 23:39:42

手指滑动屏幕原理的相关文章

UITouch手指滑动屏幕,屏幕跟着移动

1.//当手指在屏幕上滑动时 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{ UITouch *touch  = [touches anyObject]; CGPoint previousPoint = [touch previousLocationInView:self]; CGPoint currentPoint = [touch locationInView:self]; CGPoint newCenter

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

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

H5+CSS3实现手指滑动切换图片

包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <m

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 - s

H5手指滑动切换卡片效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&

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

方案思路: 1.滑动屏幕事件使用HTML5 的 touchstart 滑动开始事件和 touchend 滑动结束事件. 2.方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半轴计算角度:我们以45度角为方向分割线,如:只要滑动角度大于等于45度且小于135度,则判断它方向为向上滑. 3.使用Math.atan2()来计算起点与终点形成的直线角度. 4.仔细对比标准坐标系与屏幕坐标系,我们发现,标准坐标系,上半轴为负值,要实现转换,只需要调换Y坐标起点与终于位置即可. 代码实现: [网

移动端能用手指滑动的焦点轮播图

要使用到一个库--swipe.js,专门用来制作能够用手指滑动的焦点轮播图的.在网上下载swipe.js包,下载链接:https://codeload.github.com/thebird/Swipe/zip/2.0.0,下载后解压,文件夹名字为:swipe-master. (1)添加视口约束: (2)引入js包 (3)注意事项: // 布局, 在body标签里面,添加一个父盒子,这个父盒子可以任意取id(eg:<div id="jiaodiantu">).里面必须内嵌一个

用HTML和javascript(JS)计算触屏手机手指滑动方向的演示

移动终端的流行,程序员希望通过HTML+JS完成触屏动作的识别.下面给出具体实现的例子,供大家参考. 将下面的代码复制并保存,用手机访问,现在的手机浏览器一般都支持触屏,针对本演示来讲就是支持三个js事件: 1.touchstart---手指开始触摸事件,此事件可以获取起始坐标,将起始坐标保存在pressX 和pressY 中. 2.touchmove---手机触摸移动时间,只要手机不离开指定元素,就不停的将手机的新坐标通过事件发给页面上的js代码.通过计算此事件获取的当前坐标与起始坐标的差,就

禁止了鼠标或者是手指滑动的默认事件,后期需要恢复,该怎么做呢

做前端开发,需要根据不同时期的需求做针对性的处理,特别是Javascript中的事件处理,如果刚开始禁止了鼠标或者是手指滑动的默认事件,后期需要恢复,该怎么做呢?我今天做了下测试,没什么问题! var mark = true; document.onclick = function(){ if(mark){ mark = false; $("body").bind("touchmove",function(event){ event.preventDefault()