码迷,mamicode.com
首页 > Web开发 > 详细

给jquery 添加触屏事件,上下左右 touchwipe插件

时间:2015-01-25 23:52:57      阅读:407      评论:0      收藏:0      [点我收藏+]

标签:

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
});

 

给jquery 添加触屏事件,上下左右 touchwipe插件

标签:

原文地址:http://www.cnblogs.com/zion0707/p/4249185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!