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

WBOY
Freigeben: 2016-06-24 12:03:00
Original
1456 Leute haben es durchsucht

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>
Nach dem Login kopieren
Nach dem Login kopieren



这个有何难啊,使用 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>
Nach dem Login kopieren
Nach dem Login kopieren
在手机上怎么没效果啊?

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!