html5页面在手机上手指左右滑动

strive_super 2013-06-28 08:49:12

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

...全文

40534 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

zcxcx1236 2015-05-25

打赏
举报

<div id="zaoan"> 我试了怎么不触发事件

E_damo 2014-07-28

打赏
举报

怎么调用这个js

qq_16621095 2014-06-17

打赏
举报

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

yeluo1990 2013-07-02

打赏
举报

潇洒_哥 2013-07-02

打赏
举报

看了你们的代码，都很厉害！

strive_super 2013-07-02

打赏
举报

引用 5 楼 kinghome 的回复:

引用 4 楼 strive_super 的回复:
[quote=引用 2 楼 kinghome 的回复:] 这个有何难啊，使用 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>

[/quote]在手机上怎么没效果啊？

kinghome 2013-07-02

打赏
举报

引用 4 楼 strive_super 的回复:

引用 2 楼 kinghome 的回复:
这个有何难啊，使用 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>

strive_super 2013-07-01