总结 兼容手机 与PC 的一个插件touchwipe
2015-07-22 16:03
351 查看
兼容手机 与PC 的一个插件, 只是简单的 向上,向下,向左,向右 的 。已经上传我的文件里面。
源码如下:
View Code
此 插件, 如果 页面有 左右滑屏的事件, 则页面, 上面拖动时,就会失效, 好像是 部分,安卓手机上, 失效。
最后折腾了一下, 换了百度的一个插件
http://touch.code.baidu.com/
有一个 http://www.swiper.com.cn/api/start/2014/1218/140.html 这个插件, 但同事说, 只能全屏滑, 不能半屏滑。 待测试
http://files.cnblogs.com/files/yjhua/touchwipe.js
源码如下:
/* * ---------------------- * TouchWipe * ---------------------- * http://www.uedcool.com * by EddyZhang (张勇辉) * version 2.0 * 2011/12/29 * * #example: * $("#test").touchwipe({ * min_move_x: 40, //横向灵敏度 * min_move_y: 40, //纵向灵敏度 * wipeLeft: function() {$("#val").append("左,");}, //左侧滑动事件 * wipeRight: function() { $("#val").append("右,");}, //右侧滑动事件 * wipeUp: function() { $("#val").append("上,");}, //向上滑动事件 * wipeDown: function() { $("#val").append("下,");}, //向下滑动事件 * wipe:function(){$("#val").append("点击,");}, //触摸事件 * wipehold:function(){$("#val").append("保持,");}, //触摸保持事件 * preventDefaultEvents: true //阻止默认事件 * }); * */ (function(a){ a.fn.touchwipe=function(c){ var b={ clearTouchWipe:false, drag:false, min_move_x:20, min_move_y:20, wipeLeft:function(){/*向左滑动*/}, wipeRight:function(){/*向右滑动*/}, wipeUp:function(){/*向上滑动*/}, wipeDown:function(){/*向下滑动*/}, wipe:function(){/*点击*/}, wipehold:function(){/*触摸保持*/}, wipeDrag:function(x,y){/*拖动*/}, preventDefaultEvents:false }; if(c){a.extend(b,c)}; this.each(function(){ var h,g,j=false,i=false,e; var supportTouch = "ontouchstart" in document.documentElement; var moveEvent = supportTouch ? "touchmove" : "mousemove", startEvent = supportTouch ? "touchstart" : "mousedown", endEvent = supportTouch ? "touchend" : "mouseup" /* 移除 touchmove 监听 */ function m(){ this.removeEventListener(moveEvent,d); h=null; j=false; clearTimeout(e) }; /* 事件处理方法 */ function d(q){ if(b.preventDefaultEvents){ q.preventDefault() }; if(j){ var n = supportTouch ? q.touches[0].pageX : q.pageX; var r = supportTouch ? q.touches[0].pageY : q.pageY; var p = h-n; var o = g-r; if(b.drag){ h = n; g = r; clearTimeout(e); b.wipeDrag(p,o); } else{ if(Math.abs(p)>=b.min_move_x){ m(); if(p>0){b.wipeLeft()} else{b.wipeRight()} } else{ if(Math.abs(o)>=b.min_move_y){ m(); if(o>0){b.wipeUp()} else{b.wipeDown()} } } } } }; /*wipe 处理方法*/ function k(){clearTimeout(e);if(!i&&j){b.wipe()};i=false;j=false;}; /*wipehold 处理方法*/ function l(){i=true;b.wipehold()}; function f(n){ //if(n.touches.length==1){ h = supportTouch ? n.touches[0].pageX : n.pageX; g = supportTouch ? n.touches[0].pageY : n.pageY; j=true; this.addEventListener(moveEvent,d,false); e=setTimeout(l,750) //} }; //if("ontouchstart"in document.documentElement){ if(b.clearTouchWipe){ this.removeEventListener(startEvent,f,false); this.removeEventListener(endEvent,k,false); }else{ this.addEventListener(startEvent,f,false); this.addEventListener(endEvent,k,false) } //} }); return this }; })(jQuery);
View Code
此 插件, 如果 页面有 左右滑屏的事件, 则页面, 上面拖动时,就会失效, 好像是 部分,安卓手机上, 失效。
最后折腾了一下, 换了百度的一个插件
http://touch.code.baidu.com/
有一个 http://www.swiper.com.cn/api/start/2014/1218/140.html 这个插件, 但同事说, 只能全屏滑, 不能半屏滑。 待测试
相关文章推荐
- list的一些使用
- windows下C的定时器timeSetEvent使用
- Android studio问题汇总(不断更新)
- Spring之二 Bean
- 算法(第四版)学习笔记之java实现选择排序
- java.lang.IllegalStateException: The specified child already has a parent. You must call removeView
- HDU 5296 Annoying problem
- 递归小心得
- FP寄存器及frame pointer介绍
- 阿里云 oss python3 例子
- 开发高性能的MongoDB应用— MongoDB性能优化
- 浅谈到底什么是系统集成(弱电)和项目管理?
- jquery语句开头的#和.分别是什么意思
- redis内存泄露问题
- Spring之一 HelloWorld
- 多activity时,实现再按一次退出程序
- opencv配置指南
- Android中图案解锁的设计原理和实现过程
- 解决getOutputStream() has already been called for this response
- 当 IDENTITY_INSERT 设置为 OFF 时,不能为表中的标识列插入显式值