HTML5移动应用左右滑动touchmove touchmove touchend 实例
Posted on 2013-09-11 16:51 世纪老妖 阅读(51864) 评论(2) 编辑 收藏 举报也是刚开始接触移动前端，大虾别喷
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> 5 <title>HTML5测试</title> 6 <script src="/Content/JS/jquery-1.10.2.min.js" type="text/javascript"></script> 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 </script> 37 </head> 38 <body > 39 <form id="form1"> 40 <div style="border:solid 1px Red;" id="divADBox"> 41 <span id="spText">X轴移动大小：0</span> 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 </div> 47 </form> 48 </body> 49 </html>
