HTML5 touch event realizes the effect of sliding the page up and down [with code]_html5 tutorial skills

html5 touch event realizes the effect of sliding the page up and down [with code]

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,//触摸时的坐标    
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
32. e.preventDefault();
33. var touch=e.touches[0];
34. startY = touch.pageY; //Coordinates when just touched
35. }
37. function touchMove(e){//Slide
38. e.preventDefault();
39. var touch = e.touches[0];
40. y = touch.pageY - startY;//Sliding distance
41. //inner.style.webkitTransform = 'translate(' 0 'px, ' y 'px )'; //You can also use css3 method
42. inner.style.top=aboveY y "px"; //In this sentence  
43. }
45. function touchEnd(e){//Finger leaves the screen
46. e.preventDefault();
47. aboveY=parseInt(inner.style.top);//Record the internal slider after the touch ends The sliding position is reflected in the global variable and must be converted into an integer using parseInt();
49. }//
50. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
51. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
52. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
53. script> 
54. body> 
56. html>

The above html5 touch event realizes the page sliding up and down effect [with code] is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Original text: http://www.tuicool.com/articles/nIBJju