滑动操作
2015-11-16 11:44
260 查看
var startX, startY, isStart; //在外部声明startX以用于touchmove和touchend的函数中 $('nav').on('touchstart', function(evt) { //手指按倒屏幕上的坐标 var target = evt.targetTouches[0] || evt.changedTouches[0]; //0表示取第一个手指即单指触摸 startX = target.pageX; startY = target.pageY; isStart = 1; }); $('nav').on('touchmove', function(evt) { //手指滑动到屏幕上的坐标 if(1 !== isStart) { return; } else { isStart = 2; } var target = evt.targetTouches[0] || evt.changedTouches[0]; var moveX = target.pageX; var moveY = target.pageY; var offsetX = moveX - startX; var absX = Math.abs(offsetx); //X方向上的偏移量 var absY = Math.abs(moveY - startY); //Y方向上的偏移量 if(absX > absY) { evt.preventDefault(); //水平滑动时阻止垂直方向的偏移量 } }); $('nav').on('touchend touchcancel', function(evt) { if(2 !== isStart) { return; //若只有点击操作而无滑动则不执行下面操作 } else { isStart = undefined; } var target = evt.targetTouches[0] || evt.changedTouches[0]; var endX = target.pageX; var offsetX = endX - startX; if(offsetX > 30) { prev(); //水平向右滑动超过一定距离执行上一页 } else if(offset < -30) { next(); //水平向左滑动超过一定距离执行下一页 } else { return; } });
通过手指触摸屏幕和离开屏幕的坐标差来定义滑动
相关文章推荐
- gearmand 环境安装与配置
- Collections类方法详解
- 去掉dt中重复记录
- Fresco正传(5):请求产生和发出请求
- ARM处理器的2种工作状态和7种工作模式
- oracle模糊查询
- SlidingMenu源码解析及简单应用案例
- 有梦就放开去追
- 使用注解实现AOP
- 程序包com.sun.image.codec.jpeg不存在 问题的完美解决
- 《如何及时处理你的坏心情》第二章:我们所担心的事情,99%是不会发生的
- ThreadPoolExecutor运转机制详解
- Linux-GLIBCXX版本过低导致编译错误--version `GLIBCXX_3.4.20' not found
- 各种 SDk
- Spring常用注解,自动扫描装配Bean
- 过滤dt中重复的记录
- 关于线程变量的应用
- 使用docker构建云服务器项目
- Codeforces 596A B C Codeforces Round #331 A B C
- LeetCode---First Bad Version