search

Home >Web Front-end >H5 Tutorial >html5 touch event realizes sliding up and down the touch screen page (1)_html5 tutorial skills

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

WBOY
WBOYOriginal
2016-05-16 15:51:362279browse

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. >  
  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.         123<br>        123<br>    gag<br> af<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> yryyr<br> ryry<br> 123<br> 123<br> 123<br> 123<br> 123<br> sdff<br> fef<br> 123<br> hr<br> hrh<br> 5y<br> 123<br> er<br> ert<br> 123<br> rgdgdg<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>123<br>      123<br>    gag<br> af<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> yryyr<br> ryry<br> 123<br> 123<br> 123<br> 123<br> 123<br> sdff<br> fef<br> 123<br> hr<br> hrh<br> 5y<br> 123<br> er<br> ert<br> 123<br> rgdgdg<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>         
  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.                                           
    32. function touchSatrt(e){//touch
    33. e.preventDefault();
    34. var
  34. touch=e.touches[0];
    35.                                                                                                                                                🎜>
  35.                                                             function touchMove(e){//Slide
    36. e.preventDefault();
    37. var
  37. touch
    38. =
  38. e
    39. .touches[0];
  39.  
    40. y
  40. = touch.pageY - startY;//Sliding distance //
    41. inner.style.webkitTransform
  41. = 'translate(' 0 'px, ' y 'px )'; //You can also use css3.  
    42. 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.  
  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();
    48. }//
    49. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
    50. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
    51. 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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Getting started with HTML5 Canvas (2) - Path_html5 tutorial skillsNext article：Getting started with HTML5 Canvas (2) - Path_html5 tutorial skills

Related articles

See more