Home  >  Article  >  Web Front-end  >  html5页面在手机上手指左右滑动_html/css_WEB-ITnose

html5页面在手机上手指左右滑动_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:03:001460browse

html5在手机上手指左右滑动切换页面,哪位大虾做过,给个列子 
例如:http://imag.jimi.com/dx/


回复讨论(解决方案)

这个有何难啊,使用 touchwipe.js 很简单的就能实现了

你发的另外一个贴子我回复了。

这个有何难啊,使用 touchwipe.js 很简单的就能实现了

能给个列子不?


这个有何难啊,使用 touchwipe.js 很简单的就能实现了

能给个列子不?
<script>jq1.9min.js</script><script>(function(a){	a.fn.touchwipe=function(c){		var b={			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:true		};		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){				this.addEventListener(startEvent,f,false);				this.addEventListener(endEvent,k,false)			//}		});		return this	};})(jQuery);/*     调用*/$("#aa").touchwipe({			wipeLeft:function(){ alert("向左滑动了")},			wipeRight:function(){alert("向右滑动了")},})</script><div id="aa">    abcde </div>



这个有何难啊,使用 touchwipe.js 很简单的就能实现了

能给个列子不?
<script>jq1.9min.js</script><script>(function(a){	a.fn.touchwipe=function(c){		var b={			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:true		};		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){				this.addEventListener(startEvent,f,false);				this.addEventListener(endEvent,k,false)			//}		});		return this	};})(jQuery);/*     调用*/$("#aa").touchwipe({			wipeLeft:function(){ alert("向左滑动了")},			wipeRight:function(){alert("向右滑动了")},})</script><div id="aa">    abcde </div>
在手机上怎么没效果啊?

jq1.9min.js这个文件在哪下载

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn