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

php中文网
发布: 2016-06-24 12:03:00
原创
1712人浏览过

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

面试猫
面试猫

AI面试助手,在线面试神器,助你轻松拿Offer

面试猫 39
查看详情 面试猫

回复讨论(解决方案)

这个有何难啊,使用 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这个文件在哪下载

相关标签:
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号