码迷,mamicode.com
首页 > 其他好文 > 详细

手指滑动屏幕原理

时间:2017-11-17 16:27:37      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:时间   指定   start   time   nbsp   设置   判断   超过   参考   

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

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();//调用方法,一般是翻页

}

手指滑动屏幕原理

标签:时间   指定   start   time   nbsp   设置   判断   超过   参考   

原文地址:http://www.cnblogs.com/5-clay/p/7851452.html

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