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

也是刚开始接触移动前端,大虾别喷

 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>

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

 

 

 

你可能感兴趣的:(html5)