HTML5移动应用左右滑动touchmovetouchmovetouchend实例.doc

HTML5移动应用左右滑动touchmove touchmove touchend 实例 Posted on 2013-09-11 16:51 世纪老妖 阅读 19072 评论 1 编辑 收藏 也是刚开始接触移动前端，大虾别喷 1 !DOCTYPE HTML 2 3 4 meta name viewport content width device-width, initial-scale 1.0, maximum-scale 1.0, user-scalable 0; / 5 HTML5测试 6 script src /Content/JS/jquery-1.10.2.min.js type text/javascript 7 script type text/javascript 8 $ function 9 var startX, startY, endX, endY; 10 var showADID 1; 11 document.getElementById divADBox .addEventListener touchstart, touchStart, false ; 12 document.getElementById divADBox .addEventListener touchmove, touchMove, false ; 13 document.getElementById divADBox .addEventListener touchend, touchEnd, false ; 14 function touchStart event 15 var touch event.touches[0]; 16 startY touch.pageY; 17 startX touch.pageX; 18 19 function touchMove event 20 var touch event.touches[0]; 21 //endY startY - touch.pageY ; 22 endX touch.pageX; 23 24 function touchEnd event 25 $ #img0 + showADID .hide ; 26 showADID++; 27 if showADID 4 28 showADID 1; 29 30 if startX - endX 100 31 $ #img0 + showADID .show ; 32 33 $ #spText .html X轴移动大小： + startX - endX ; 34 35 36 37 38 39 form id form1 40 div style border:solid 1px Red; id divADBox 41 span id spText X轴移动大小：0 42 img id img01 src /Content/Images/1.gif / 43 img id img02 src /Content/Images/2.gif style display:none; / 44 img id img03 src /Content/Images/3.gif style display:none; / 45 img id img04 src /Content/Images/4.gif style display:none; / 46 47 48 49