1. $('body').on('click', '.placeholder img', function(e) {
  2. //touchstart在你之前发生,不管些什么,都先执行下面的
  3. });
  4.  
  5. $('body').on('touchstart', '#gallerySlider img', function(e) {
  6. var touch = e.originalEvent,
  7. startX = touch.changedTouches[0].pageX;
  8. startY = touch.changedTouches[0].pageY;
  9. slider.on('touchmove', function(e) {
  10. e.preventDefault();
  11. touch = e.originalEvent.touches[0] ||
  12. e.originalEvent.changedTouches[0];
  13. if (touch.pageX - startX > 10) {
  14. console.log("右划");
  15. slider.off('touchmove');
  16. showPrevious();
  17. } else if (touch.pageX - startX < -10) {
  18. console.log("左划");
  19. slider.off('touchmove');
  20. showNext();
  21. };
  22. if (touch.pageY - startY > 10) {
  23. console.log("下划");
  24. } else if (touch.pageY - startY < -10) {
  25. console.log("上划");
  26. };
  27. });
  28.  
  29. // Return false to prevent image
  30. // highlighting on Android
  31. return false;
  32.  
  33. }).on('touchend', function() {
  34. slider.off('touchmove');
  35. });

  

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. js中数组

  2. SAP无损耗,FP前台和回写均有2%损耗

    SAP前台显示无损耗 FP前台显示有损耗 回写也有损耗 检查:从SAP取数到FP表是没有损耗 1132物料编码的主数据也是没有损耗 检查:FP_MO2SAP存储过程

  3. jquery的常用ajax操作

    $.ajax() 定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() ...

  4. Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

  5. 【iOS问题】The file “XXX.app” couldn’t be opened because you don’t have permission to view it.

    当引入第三方的框架的时候 容易产生以下问题: The file "XXX.app" couldn't be opened because you don't have permis ...

  6. eclipse构建及运行maven web项目

    1:环境 eclipse indigo, JDK1.6, maven 3.2.1, tomcat7.0.42 2:安装eclipse maven插件 m2eclipse 第一种方法:从网上下载m2ec ...

  7. 关于C# 窗体自动隐藏和加载的问题

    最近在写一个小项目,开发一个小程序配合其他软件使用,其中一款软件在使用工作时需要截图生成报告,此时不能有其他应用程式界面在显示器桌面显示,故需要自动隐藏和加载窗体,通过阅读Windows API实现了 ...

  8. 循环不变量loop invariant 与 算法的正确性

    在论述插入排序的正确性的时候, 书中引入了循环不变量的概念, 刚开始稍微有点不太明白, 早上查了一波资料之后决定把自己的理解记录下来. 什么是循环不变量 ? 在我看来, 所谓循环不变量的就是一个在循环 ...

  9. Web服务器Nginx多方位优化策略

    标签:性能 Web 架构 Nginx 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://dongsong.blog.51cto.co ...

  10. decode 横竖转换 2

    select sno,nvl(to_char(sum(decode(cno,'c001',score))),'-') c001,nvl(to_char(sum(decode(cno,'c002',sc ...