$('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. spi 子系统

    http://blog.csdn.net/ropenyuan/article/details/42269641 http://blog.chinaunix.net/uid-27406766-id-33 ...

  2. 如何实现能像windows 窗体一样改变大小的控件 Silverlight

    众所周知,我们可以将鼠标放在windows窗体的边框上,按住鼠标左键改变窗体大小.那么,在silverlight上如何实现呢? 1. 需要将改控件放置在canvas上. 2. 判断鼠标位置,然后将Ar ...

  3. ftl文件格式化jsp形式显示

    通过myeclipse设置ftl的编辑器为jsp的编辑器,达到效果. Myeclipse->windows->preferences 1\ 2\ 3\ 完成后即可.

  4. Selenium2+python自动化8-SeleniumBuilder辅助定位元素

    前言 福利来了,对于用火狐浏览器的小伙伴们,你还在为定位元素而烦恼嘛? 上古神器Selenium Builder来啦,哪里不会点哪里,妈妈再也不用担心我的定位元素问题啦!(但是也不是万能,基本上都能覆 ...

  5. CXF 入门:创建一个基于WS-Security标准的安全验证(CXF回调函数使用,)

    http://jyao.iteye.com/blog/1346547 注意:以下客户端调用代码中获取服务端ws实例,都是通过CXF 入门: 远程接口调用方式实现 直入正题! 以下是服务端配置 ==== ...

  6. delphi 10.1 berlin最新的开发框架:咏南中间件+咏南开发框架,购买后提供全部的源码

    咏南中间件+咏南开发框架支持最新的delphi 10.1(berlin),老用户提供免费升级. 购买提供:中间件源码 附带福利(赠送): CS开发框架源码BS开发框架源码移动APP源码中间件集群源码二 ...

  7. Java中的转义字符

    1.转义字符 1.八进制转义序列:\ + 1到3位5数字:范围'\000'~'\377' \0:空字符     2.Unicode转义字符:\u + 四个十六进制数字:0~65535       \u ...

  8. JAVA基础之两种核心机制

    突然之间需要学习Java,学校里学的东西早就忘记了,得用最短的时间把Java知识理顺,重点还是J2EE,毕竟所有的ava项目中95%都是J2EE,还是先从基础的J2SE学起吧....... 首先是了解 ...

  9. P1147连续自然数和

    洛谷1147 连续自然数和 题目描述 对一个给定的自然数M,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为M. 例子:1998+1999+2000+2001+2002 = 10000,所 ...

  10. java中的内部类小结

    内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类.如同一个人是由大脑.肢体.器官等身体结果组成,而内部类相当于其中的某个器官之一,例如心脏:它也有自己的属性和行为(血液.跳动).显然, ...