HTML5移动应用左右滑动touchmove touchmove touchend 实例
1 2 3
4content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0;" /> 5
HTML5测试 6 7startX, 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
3940X轴移动大小:042
src="/Content/Images/1.gif" />43
src="/Content/Images/2.gif" style="display:none;" />44
id="img03" src="/Content/Images/3.gif" style="display:none;" />45
46