html5移动应用实例,HTML5移动应用左右滑动实例

HTML5移动应用左右滑动touchmove touchmove touchend 实例

1 2 3

4

content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

user-scalable=0;" /> 5

HTML5测试 6 7

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

3940

41

X轴移动大小：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

47 48 49