zoukankan      html  css  js  c++  java
  • 给jquery 添加触屏事件,上下左右 touchwipe插件

    touchwipe.js

    (function($){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings);this.each(function(){var startX;var startY;var isMoving=false;function cancelTouch(){this.removeEventListener('touchmove',onTouchMove);startX=null;isMoving=false}function onTouchMove(e){if(config.preventDefaultEvents){e.preventDefault()}if(isMoving){var x=e.touches[0].pageX;var y=e.touches[0].pageY;var dx=startX-x;var dy=startY-y;if(Math.abs(dx)>=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft()}else{config.wipeRight()}}else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown()}else{config.wipeUp()}}}}function onTouchStart(e){if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener('touchmove',onTouchMove,false)}}if('ontouchstart'in document.documentElement){this.addEventListener('touchstart',onTouchStart,false)}});return this}})(jQuery);

    使用方法:

    $('html').touchwipe({
      wipeLeft:function(){
      alert('左');
    },
      wipeRight:function(){
      alert('右');
    },
      wipeUp:function(){
      alert('下');
    },
      wipeDown:function(){
      alert('上');
    },
      preventDefaultEvents:true
    });

  • 相关阅读:
    Linux(Unix)时钟同步ntpd服务配置方法(转载)
    Linux SSH Publickey登录!
    三个最短路算法
    三个最短路算法
    最大子列和问题
    哈密尔顿环
    最小生成树应用解(超时)蓝桥杯2015初赛]灾后重建
    最小生成树应用解(超时)蓝桥杯2015初赛]灾后重建
    c++11的记录
    最大子列和问题
  • 原文地址:https://www.cnblogs.com/zion0707/p/4249185.html
Copyright © 2011-2022 走看看