$('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. win7如何配置access数据源

    今天想做个管理系统,需要用到数据库,还要设置数据源,可是当我打开控制面板的管理工具的数据源发现只有SQL驱动,找不到access,因为我是用acess做的啊,所以就很郁闷,不过看到了一个方法,好吧,我 ...

  2. Spring 定时执行任务

    好不容易写了半天的文章竟然由于断网而丢失了,并未自动保存到草稿箱.只能简单的贴贴代码了. <?xml version="1.0" encoding="UTF-8&q ...

  3. Eclipse PHP Studio(EPP)

    Eclipse PHP Studio (EPP) 中文版官方网站 :http://epp.php100.com/ EclipsePHP Studio 简体中文版介绍 - EPP EclipsePHP ...

  4. 第1章 C#类型基础

    1.1值类型和引用类型 1.1.1 值类型 使用值类型之前需要对值类型的所有元素初始化(普通值类型和结构体). 结构还有一个特性:调用结构上的方法前,需要对其所有的字段进行赋值,为了避免对结构体中所有 ...

  5. Nginx-->进阶-->原理-->Nginx+php+fastcgi的原理与关系

    一.用户对动态PHP网页访问过程 用户浏览器发起对网页的访问:http://192.168.1.103/index.php 用户和nginx服务器进行三次握手进行TCP连接(忽略包括nginx访问控制 ...

  6. 【ShaderForge】溶解测试

    已支持粒子颜色的所有控制  折射效果已支持Alpha的影响(Texture必须是tga或dds带通道贴图,PNG贴图不支持折射Alpha效果的影响,其他贴图支持任何格式) 说明:  SpecularC ...

  7. const限定符

    1 const的作用 便于进行类型检查.可以保护被修饰的东西.避免不必要的内存分配.为函数重载提供一个参考. 2 const成员函数 const成员函数只能访问数据成员的值,而不能修改他. #incl ...

  8. .net WebApi中使用swagger

    我在WebApi中使用swagger的时候发现会出现很多问题,搜索很多地方都没找到完全解决问题的方法,后面自己解决了,希望对于遇到同样问题朋友有帮助.我将先一步一步的演示项目中解决swagger遇到问 ...

  9. ICE系列之3对象接口定义语言——slice

         Slice 定义由编译器编译到特定的实现语言 .编译器把与语言无关的定 义翻译成针对特定语言的类型定义和 API.开发者使用这些类型和 API 来 提供应用功能,并与 Ice 交互.用于各种 ...

  10. servlet 生命周期

    Ò编写一个HelloWordServlet类