$('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. jquery选择器使用说明

    在jquery中选择器是一个非常重要的东西,几乎做什么都离不开它,下面我总结了jquery几种选择器的用法.以方便后面直接可以用到!! 层次选择器: 1.find()://找到该元素的子元素以及孙子元 ...

  2. SQLiteHelper

    /** * 实现对表的创建.更新.变更列名操作 * * */ public class SQLiteHelper extends SQLiteOpenHelper { public static fi ...

  3. 1211php面向对象

    首先需要定义数组,$attr = array(直接给元素1,2,3)索引数组 关联数组 $attr = array("one"=>1,2,3) for($i=0;$i< ...

  4. ros问题总结

    1.-- package 'orocos-bfl' not found CMake Error at /usr/share/cmake-2.8/Modules/FindPkgConfig.cmake: ...

  5. X86上搭建交叉工具链,来给龙芯笔记本编译本地工具链(未完待续)

    故事的背景是,我买了一台龙芯2F的笔记本来装B. 为什么说是装B呢?因为不但操作系统是Linux,而且CPU还是龙芯的. 一般人有这么酷的装备吗?简直是装B大圣啊. 这里一定要申明一点,本人不是IT技 ...

  6. 关于H5本部缓存localStorage,sessionStorage

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 coo ...

  7. 重新开源UDS

    这个题目起得很纠结. 因为很多人都知道UDS本来就是开源,我只不过改了一些东西,然后重新发布,所以不算重新开源. 要说重新发布也不对.因为老早这东西就发布了. 最后我想,这个东西已经很久没更新过了,也 ...

  8. Linux之DNS

    DNS服务器配置 一.DNS概述:DNS 是域名系统 (Domain Name System) 的缩写,是一种组织域层次结构的计算机和网络服务命名系统.它的作用是:把域名转换成为网络可以识别的 IP ...

  9. mysql where 1=1和 1=0 的作用

    本文来自网络 where 1=1; 这个条件始终为True,在不定数量查询条件情况下,1=1可以很方便的规范语句. 一.不用where  1=1  在多条件查询中的困扰 举个例子,如果您做查询页面,并 ...

  10. hdu 4698 - Counting(思路)

    转:题意:给定一个二维平面,其中x取值为1-N,y取值为1-M,现给定K个点,问至少包括K个点中的一个的满足要求的<Xmin, Xmax, Ymin, Ymax>共有多少中取值情况.也就是 ...