$('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. 使用TFS 自动编译时的一点设置

    MSBuild参数:  /p:VisualStudioVersion=10.0 指定使用的VS编译版本

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

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

  3. JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling

    <body> <ul id="ul1"> <li>11111</li> <li>22222</li> < ...

  4. LInux javac时, 提示command not found

    这个是我之前看了很多的论坛发现的问题,我想了很久也没有发现问题,明明路径都是对的,配置文件也没有错误,为什么最后却只有执行java好使,但是执行javac不好使 因为java分两个版本一个是jre,一 ...

  5. MY SQL 知识

    LINUX配置优化 诊断命令 more perfomance tool SRE performance 硬件优化 raid 10 ssd Fusion-io 大内存 电池后备SCSI磁盘缓存 系统优化 ...

  6. eclipse开发环境搭建

    1.eclipse插件OpenExplorer快速打开文件目录 下载地址:https://github.com/samsonw/OpenExplorer/downloads 下载jar包,将jar包放 ...

  7. CentOS防火墙问题

    问题背景 在Vmware虚拟机中安装了 CentOS 7 的 Linux 版本,并在其中安装了 Oracle 11g 数据库,数据库可以在虚拟机中顺利启动,本地主机也可以 ping 通 linux.准 ...

  8. out与ref的区别

    out与ref的区别  前者传参时不必初始化,后者需要初始化 int a,b; public void fName(out int a,out int b); fName(out a , out b) ...

  9. [UCSD白板题] Covering Segments by Points

    Problem Introduction You are given a set of segments on a line and your goal is to mark as few point ...

  10. 使用OFBIZ 时,使用的键入提示。

    对商品的键入提示 ,效果如图(当输入关键字时,会提示出相应的数据) 首先要引入相应的插件 页面字段 js方法