$('body').on('touchstart', '#gallerySlider img', function(e) {

var touch = e.originalEvent,

startX = touch.changedTouches[0].pageX;

startY = touch.changedTouches[0].pageY;

slider.on('touchmove', function(e) {

e.preventDefault();

touch = e.originalEvent.touches[0] ||

e.originalEvent.changedTouches[0];

if (touch.pageX - startX > 10) {

console.log("右划");

slider.off('touchmove');

showPrevious();

} else if (touch.pageX - startX < -10) {

console.log("左划");

slider.off('touchmove');

showNext();

};

if (touch.pageY - startY > 10) {

console.log("下划");

} else if (touch.pageY - startY < -10) {

console.log("上划");

};

});

        // Return false to prevent image
// highlighting on Android
return false; }).on('touchend', function() {
slider.off('touchmove');
});

纯js 判断手势滑动方向的更多相关文章

  1. js判断手指滑动方向(移动端)

    var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...

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

    每天学习一点点. 1 var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) ...

  3. jquery 判断手势滑动方向(上下左右)

    $('body').on('click', '.placeholder img', function(e) { //touchstart在你之前发生,不管些什么,都先执行下面的 }); $('body ...

  4. 移动端JS判断手势方向

    原生JS判断手势方向的解决思路: 1.滑动屏幕事件使用html5 的touchstart滑动开始事件和touchend滑动结束事件. 2.方向的判断,以起点做平面坐标系,与终点连线做直线,直线与x正半 ...

  5. 对于移动端浏览器touch事件的研究总结(4)判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...

  6. 《移动端浏览器Touch事件判断手指滑动方向方法》

    $("body").on("touchstart", function(e) {     e.preventDefault();     startX = e. ...

  7. jquery判断手指滑动方向

    jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...

  8. web移动前端页面,jquery判断页面滑动方向

    /*判断上下滑动:*/ $('body').bind('touchstart',function(e){ startX = e.originalEvent.changedTouches[0].page ...

  9. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

随机推荐

  1. UITextField使用详解

    转iOS中UITextField使用详解 (1) //初始化textfield并设置位置及大小   UITextField *text = [[UITextField alloc]initWithFr ...

  2. javascript typeof

    https://zhidao.baidu.com/question/79159257.html typeof 运算符返回一个用来表示表达式的数据类型的字符串. 可能的字符串有:"number ...

  3. 《UML大战需求分析》阅读笔记4

    流程分析利器之二,状态机图. 状态机图也可以叫状态图,也是用来分析流程的,之前的活动图的主体是事件的行为,而状态机图主要描述的是事件的状态. 开始:实心圆点: 结束:点加环:(与活动图一样) 状态:圆 ...

  4. python模块及包的导入

    一.模块 通常模块为一个文件,直接使用import来导入就好了.可以作为module的文件类型有".py".".pyo".".pyc".&q ...

  5. BruteXSS:XSS暴力破解神器

    ×01 BruteXSS BruteXSS是一个非常强大和快速的跨站点脚本暴力注入.它用于暴力注入一个参数.该BruteXSS从指定的词库加载多种有效载荷进行注入并且使用指定的载荷和扫描检查这些参数很 ...

  6. android开机过程简单描述

    1 开机引导bootloader,相当于电脑开机启动bios 2 引导过后可以进入三种模式:fastboot, recovery, linux kernel.前两种跟版本升级相关,正常开机进入linu ...

  7. TTL 生存时间介绍 (转)

    TTL: (Time To Live)生存时间,是IP协议包中的一个值,它告诉网络路由器包在网络中的时间是否太长而应被丢弃.有很多原因使包在一定时间内不能被传递到目的地.例如,不正确的路由表可能导致包 ...

  8. Tomcat部署遇到的问题

    项目服务端:Tomcat6.0.41 选用数据库:Mysql5.6.17 JDK环境:1.6.37 运行系统:Windows server 2008(64bit) ================== ...

  9. IOS对.Net返回的Base64string解析问题

    1.c#生成Base64字符串的代码 string body = "{\"title\":\"上次CVR卡其\",\"url\": ...

  10. Struts2基础

    访问ServletApi (1)用ActionConten访问Api, ActionContent.getContext().getSession().put("user",&qu ...