javascript实现手机触摸屏左右（上下）滚动（javascript感知滑屏方向）
来源：岁月联盟
时间：2012-06-26
<!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>
作者：leinchu
