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

  

jquery 判断手势滑动方向(上下左右)的更多相关文章

  1. jquery判断手指滑动方向

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

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

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

  3. 纯js 判断手势滑动方向

    $('body').on('touchstart', '#gallerySlider img', function(e) { var touch = e.originalEvent, startX = ...

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

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

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

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

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

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

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

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

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

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

  9. 如何判断ScrollView滑动方向

    1/判断滚动视图左右滚动 { CGFloat startContentOffsetX;//滚动开始的坐标 CGFloat willEndContentOffsetX; //滚动即将停止的坐标 CGFl ...

随机推荐

  1. Unsupported major.minor version

    by: java.lang.UnsupportedClassVersionError: com/dayang/product/pubinfo/dao/ProPubInfoDAO : Unsupport ...

  2. asp.net GDI+绘制多个矩形

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. Android常见崩溃或闪退的问题描述及原因总结、及与性能相关的模块——持续更新

    1.nullpointer——就是使用一个对象的时候还没有对其进行初始化导致该问题 一般在何种情况下容易出现呢? (1)父窗口+子窗口同时出现的,父窗口因为某种原因消掉了,子窗口还在,操作子窗口找不到 ...

  4. html 表格的制作

    表格的制作 表格<table></table> <table  width=""  height=""  align=" ...

  5. fedora 安装vmwear

    Fedora 13下安装后缀为bundle文件,网上的说法很多,最普遍的方法是: 你的登陆名为TEST那么就将要安装的文件放在TEST目录下,不要放到目录下的子目录上面,否则不能运行.然后执行 第一步 ...

  6. NDK开发之引用(局部引用,全局引用,虚全局引用)

    1.先引出我遇到的一个问题(我觉得先写问题,这样印象更深刻一点): Android Java层在调用本地jni代码的时候, 会维护一个局部引用表(最大长度是512), 一般jni函数调用结束后, jv ...

  7. android设置多个类似APP其中的一个为默认

    05-09 17:01:13.547: I/ActivityManager(3003): START u0 {act=android.intent.action.VIEW cat=[android.i ...

  8. MS SQL还原备份数据出错

    MS SQL还原 XXXX.bak文件时候,数据库中出现如下的错误. 错误提示: 还原 对于 服务器“SAM-PC\SQLEXPRESS”失败.  (Microsoft.SqlServer.SmoEx ...

  9. ajax返回类型dataType json和text比较

    $.ajax({ type: "post", url: "${ctx}/modules/fos/reference/echart", //dataType:'j ...

  10. objective-c 创建工程/编译/运行程序

    // First program example #import <Foundation/Foundation.h> int main (int argc, const char * ar ...