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>';}elsetmp+='<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;elsevar _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 = ' +dirif(dir=='left')slowmv(pid,obj.style.width?parseInt(obj.style.width,10):300,1);elseslowmv(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兑现手机触摸屏左右（上下）

热点推荐