html5 touch event realizes sliding up and down the touch screen page (1)_html5 tutorial skills

The recent app project I was working on caused a lot of problems due to the use of overflow: hidden, so I decided to study the touch event of HTML5. It is difficult to find a comprehensive post. Although there are many articles about html5 touch, most of them introduce touch events or very short demos.
A relatively comprehensive small demo of sliding up and down, the code is relatively simple.

The following is the complete code. I have marked several important places in red

XML/HTML CodeCopy content to clipboard

1. html>  
2. html lang="en">  
3. head>  
4.     meta charset="UTF-8">  
5.     meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>  
6.     title>2014-4-29title>  
7.     style>  
8.     * {margin: 0;  padding: 0;}   
9.     #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}   
10.     #inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0;  }  
11.     style>  
12.     script src='jquery-1.9.1.min.js'>script>  
13. head>  
14. body>  
15.   
16. div id="spText">div>  
17.     div id="outer">  
18.         div id="inner">  
19.         123br>        123br>    gagbr> afbr> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> yryyrbr> ryrybr> 123br> 123br> 123br> 123br> 123br> sdffbr> fefbr> 123br> hrbr> hrhbr> 5ybr> 123br> erbr> ertbr> 123br> rgdgdgbr> 123br> 123br> 123br> 123br> 123br> 123br> gfgfgfgfgfgfbr> sdsdsdsdsdsdbr> sfbr> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> gdggdgdgbr> 123br> drgdrgdbr> 123br> 123br> 123br> yuyuyuyuyuybr> hjkhjkhkhkhjkhkhbr> kjkjkbr>123br>      123br>    gagbr> afbr> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> yryyrbr> ryrybr> 123br> 123br> 123br> 123br> 123br> sdffbr> fefbr> 123br> hrbr> hrhbr> 5ybr> 123br> erbr> ertbr> 123br> rgdgdgbr> 123br> 123br> 123br> 123br> 123br> 123br> gfgfgfgfgfgfbr> sdsdsdsdsdsdbr> sfbr> 123br> 123br> 123br> 123br> 123br> 123br> 123br> 123br> gdggdgdgbr> 123br> drgdrgdbr> 123br> 123br> 123br> yuyuyuyuyuybr> hjkhjkhkhkhjkhkhbr> kjkjkbr>         
20.         div>  
21.     div>  
22.   
23. script>
24. var startX, //Coordinates when touched
25. startY,
26. x, //sliding distance
27. y,
28.  aboveY=0; //Set a global variable to record the position of the last internal block slide
30. var inner=document.getElementById("inner");
31.                                           
function touchSatrt(e){//touch
e.preventDefault();
var
34. touch=e.touches[0];
                                                                                                                                               🎜>
35.                                                             function touchMove(e){//Slide
e.preventDefault();
var
37. touch
=
38. e
.touches[0];
39.  
y
40. = touch.pageY - startY;//Sliding distance //
inner.style.webkitTransform
41. = 'translate(' 0 'px, ' y 'px )'; //You can also use css3.  
inner.style.top
42. =aboveY y "px"; //AboveY in this sentence is The position of inner after the last slide }             
44. function touchEnd(e){//Finger leaves the screen
45. e.preventDefault();
 
46. aboveY=parseInt(inner.style.top);//Record the internal slider after the touch is completed The sliding position is reflected in the global variable and must be converted into an integer using parseInt();
}//
document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
document.getElementById("outer").addEventListener('touchend', touchEnd,false);
52. script>
53. body>
55. html>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Original text:

http://www.cnblogs.com/leinov/p/3701951.html