javascript兑现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）

javascript实现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="target-densitydpi=medium-dpi, width=device-width, height=device-height, initial-scale=1" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
body{border:1px solid #066}
.b{ width:1000px; height:77px}
.b div{width:98px; height:75px; word-wrap:break-word; word-break:break-all; float:left; border:1px solid #096;  overflow:scroll}
</style>
</head>
<body leftmargin="4" rightmargin="4" onswipe="g('dbg1').innerHTML='swipe b'" onswipeleft="g('dbg2').innerHTML='left b'" onswiperight="g('dbg2').innerHTML='right b'">
swipe swipeleft swiperight
<div id="div1" style="width:300px; overflow:hidden; height:77px; margin:0 auto" onswipe="g('dbg1').innerHTML='swipe'" onswipeleft="g('dbg2').innerHTML='left'" onswiperight="g('dbg2').innerHTML='right'">
	<div style="word-break:break-all" class="b">
        <div id="dbg1"> 1</div>
        <div id="dbg2"> 2</div>
        <div id="dbg3"> 3</div>
        <div id="dbg4"> 4</div>
        <div id="dbg5"> 5</div>
        <div id="dbg6"> 6</div>
        <div> 7</div>
        <div> 8</div>
        <div> 9</div>
        <div> 0</div>
    </div>
</div>
<div id="dbg">dbg</div>
   
<script language="javascript">
function printEvent(evt)
{
	try
	{
		var tmp = '';
		for(var i in evt)
		{
			tmp += i+':'
			var v = evt[i]+'';
			if(v=='[object HTMLDivElement]')
			{
				tmp+=' <b>div</b> - '+evt[i].id+'<br/>';
			}
			else if(''+(evt[i])=='[object TouchList]')
			{
				tmp+=' <br/>    <b>touchlist</b>:<div style="border:1px solid red; margin:1px"> ';
				for(var x in evt[i])
				{
					if(''+(evt[i][x])=='[object Touch]')
					{
						tmp+='<br>    ----'+x+':'+' <b>Touch</b><br/><div style="border:1px solid blue;margin:1px">';
						for(var y in evt[i][x])
						{
							if(evt[i][x][y]=='[object HTMLDivElement]')
							{
								tmp+='    ----'+y+':<b>div</b> - '+evt[i][x][y].id+'<br/>';
							}else tmp+='<br>    ----'+y+':'+evt[i][x][y]+'<br/>';
						}
						tmp+='</div>';
					}else
						tmp+='<br>     '+x+':'+evt[i][x]+'<br/>';
				}
				tmp+='</div>';
			}else if(typeof(evt[i])=='number'){				
				tmp+='<font color="green">'+v+'</font><br/>';
			}			
			else tmp+=''+v+'<br/>';
		}
		return tmp;
	}catch(e){
		alert(e)
	}
}

function g(id)
{
	return document.getElementById(id);
}
var swiping = false;
var step = 16;
function slowmv(pid,v,v1)
{
	try{
		var moved = arguments.length==4?arguments[3]:0;
		if(moved+step>v)
			var _step = v-moved;
		else
			var _step = step;
	
		moved+=_step;
		var obj = g(pid);
		var display_width = obj.style.width?parseInt(obj.style.width,10):0;
		
		var new_left = obj.scrollLeft+_step*v1;
		if((v1>0&&new_left+display_width>=obj.scrollWidth)||(v1<0&&new_left<=0)) new_left = new_left<=0?0:(obj.scrollWidth-display_width);
		obj.scrollLeft = new_left;
		
		if(moved<v)
		{
			if(new_left>=obj.scrollWidth-display_width||new_left<=0){
				swiping = false;
				return;
			}
			setTimeout(function(){slowmv(pid,v,v1,moved);},25)
		}else swiping = false;
		
		g('dbg').innerHTML  = g('dbg').innerHTML + '<br>new_left=' +new_left+',pid='+pid+',scrollWidth='+obj.scrollWidth;
		g('dbg').innerHTML  = g('dbg').innerHTML + ','+ screen.availWidth+','+screen.width;
	}catch(e){
		alert('slowmv error='+e+',pid='+pid+',v='+v+',v1='+v1);
	}
}
function swipe(pid,dir,xydiff)
{
	if(swiping) return;
	swiping = true;
	try{
		var obj = g(pid);
		g('dbg').innerHTML  = g('dbg').innerHTML + ',dir = ' +dir
		if(dir=='left')
			slowmv(pid,obj.style.width?parseInt(obj.style.width,10):300,1);
		else
			slowmv(pid,obj.style.width?parseInt(obj.style.width,10):300,-1);			
	}catch(e){
		alert(e)
	}
}

function touch(obj,func)
{
	this.swipe_function[obj.id] = func;
	obj.data = this;
	this.bind(obj,'touchstart',function(e){this.data.touchstart(e);});
	this.bind(obj,'touchend',function(e){this.data.touchend(e);});
	this.bind(obj,'touchmove',function(e){this.data.touchmove(e);});
}
touch.prototype.tch_start = {};
touch.prototype.tch_mv = {};
touch.prototype.swipe_function = {};
touch.prototype.bind = function(obj,evt,fun)
{
	if(typeof obj.attachEvent != 'undefined')
	{
		obj.attachEvent('on'+evt,fun);
	}else{
		obj.addEventListener(evt,fun,true);
	}
}
touch.prototype.touchstart=function(evt)
{
	try{
		var tch = evt['touches'][0];
		this.tch_start[tch.target.id] = [tch.clientX,tch.clientY];
		g('dbg').innerHTML = tch.target.id+' (start) : '+ this.tch_start[tch.target.id];
	}catch(e){
		alert('this.tch_start='+this.tch_start+'<br />'+e);
	}
}
touch.prototype.touchend=function (evt)
{
	try{
		var id = evt.changedTouches[0].target.id;
		var pid = evt.currentTarget.id;
		var now = this.tch_mv[id];
		var start = this.tch_start[id];
		var xdiff = now[0]-start[0];
		var ydiff = now[1]-start[1];
		
		var f = this.swipe_function[pid];
		if(xdiff<-20)
		{
			f(pid,'left',xdiff);
			return;
		}
		
		if(xdiff>20)
		{
			f(pid,'right',xdiff);
			return;
		}
		
		if(ydiff<-20)
		{
			f(pid,'up',ydiff);
			return;
		}
		
		if(xdiff>20)
		{
			f(pid,'down',ydiff);
			return;
		}	
	}catch(e){
		alert('touchend error='+e)
	}
}

touch.prototype.touchmove=function(evt)
{
	try{
		var tch = evt['touches'][0];
		var now = [tch.clientX,tch.clientY];
		var id  = tch.target.id;
		this.tch_mv[id] = now;
		g('dbg').innerHTML = id+' (mv) : '+ now;
	}catch(e){
		alert('touchmove error='+e)
	}
}

var t = new touch(g('div1'),swipe);

</script>
</body>
</html>
javascript兑现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）

相关推荐
