简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  html5 touch event realizes sliding up and down of touch screen page (2)_html5 tutorial skills

html5 touch event realizes sliding up and down of touch screen page (2)_html5 tutorial skills

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

The previous article used the html5 touch event to create a simple sliding effect, achieving the effect of continuous page sliding up and down. Refer to the previous article and code html5 touch event to realize the up and down sliding of the touch screen page (1)

This article mainly achieves one effect: when the page slides to the top or bottom, it is prevented from continuing to slide;

Because the touch event is added to the page, the original default attributes of other pages such as scroll bars will not be changed. The demo in the previous article can slide up or down all the time, but the reality is that this is not advisable

Full code:

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-5-4title>  
  7.     <style>  
  8.     * {margin: 0;  padding: 0;}   
  9.     #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}   
  10.     #inner{width:80%;  background: #e4e4e4; margin: auto; position:relative; top:0px; font-size: 1em; padding: 30px 10px;  }   
  11.     #inner p{line-height: 30px; letter-spacing: 3px; text-indent:2em;}   
  12.     #spText{ height: 40px; width: 100%;border:1px solid red;}   
  13.     h2{ width: 100%; text-align: center; }   
  14.     h3{ width: 100%; padding-left:60%;}  
  15.     style>  
  16.     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'>script>  
  17. head>  
  18. <body>  
  19.   
  20. <div id="spText">div>  
  21. <div id="spText2">div>  
  22.     <div id="outer">  
  23.         <div id="inner">  
  24.             <h2>背影h2>  
  25.             <h3>—朱自清h3>  
  26.                        <p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。[1-2]   
  27.         那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”[1-2]   
  28.         回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。[1-2]   
  29.         到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。I repeatedly advised him not to go; he just said: "It doesn't matter, it's not good for them to go!" [1-2]
  30. We crossed the river and entered the station. I bought the ticket and he was busy taking care of the luggage. There was too much luggage, so I had to tip the porter to get through. He was busy negotiating the price with them again. I was really too smart at that time, and I always felt that what he said was not very nice and I had to interrupt myself. But he finally agreed on the price and sent me to the car. He picked me a chair by the car door; I spread the purple fur coat he made for me on the seat. He told me to be careful on the road and to be alert at night so as not to catch cold. I also asked the waiter to take good care of me. I secretly laughed at his pedanticness; they only recognized money, and trusting them was just free money! And for someone as old as me, can’t I still take care of myself? [1-2]
  31. I said: "Dad, let's go." He looked outside the car and said, "I'm going to buy some oranges. You stay here, don't move around." I looked at the platform over there. There are several sellers waiting for customers outside the fence. When you get to the platform over there, you have to cross the railway, jump down and climb up again. My father is a fat man, so it would be more troublesome to walk there. I was going to go, but he refused, so I had to let him go. I saw him wearing a black cloth cap, a large black cloth mandarin jacket, and a dark blue cloth cotton robe. He staggered to the side of the railway and slowly leaned down. It was not a disaster. But it was not easy for him to cross the railway and climb to the platform over there. He clung to it with both hands and retracted his feet upwards; his fat body leaned slightly to the left, showing an effort. At this time I saw his back, and my tears flowed down quickly. I quickly wiped away my tears. Afraid that he would see it, and also afraid that others would see it. When I looked outside again, he had already hugged the scarlet orange and walked back. When crossing the railway, he first scattered the oranges on the ground, climbed down slowly, then picked up the oranges and walked away. When I got here, I quickly went to help him. He walked with me to the car and put oranges on top of my fur coat. So he puffed away the dirt on his clothes, feeling very relaxed. After a while he said: "I'm leaving. I'll write you a letter over there!" I watched him go out. He walked a few steps, turned around, saw me, and said, "Go in, there's no one inside." When his back blended in with the people coming and going, and he couldn't be found anymore, I came in and sat down, and my tears came again. . [1-2]
  32. In recent years, my father and I have been running around, and the situation at home has deteriorated day by day. He went out to make a living as a young man, supported himself by himself, and did many great things. Who knew Laojing was so decadent! He was so sad that he couldn't help himself. When he is depressed in his heart, he will naturally express it outwardly; trivial matters in his family will often make him angry. He gradually treated me differently than before. But after not seeing each other for the past two years, he finally forgot about my faults and just thought about me and my son. [1-2]
  33. After I came to the north, he wrote a letter to me, saying in the letter: "I am in good health, but my arm hurts terribly, and I have a lot of inconvenience in lifting chopsticks and pens. I think my death is not far away. "As I read this, in the glistening tears, I saw the fat figure in the green cloth cotton robe and black cloth mandarin again.well! I don’t know when I will see him again!p>
  34. div>
  35.  div> 
  37. <script>
  38. var startX, //Coordinates when touched
  39. startY,
  40. x, //sliding distance
  41. y,
  42.  aboveY=0; // Set a global variable to record the position of the last internal block slide
  43. var documentHeight=$("#inner").height();//The height of the internal sliding module
  44. var wapperHeight=$("#outer").height(); //Height of the outer frame
  45.                                                         
    47. var
  47. inner=document.getElementById("inner");
    49. function touchStart(e){//Touch start
    50. e.preventDefault();
    51. var
  51. touch=e.touches[0];
    52.                                                                                                                 🎜>
  52. }
  54. function touchMove(e){//Slide
  55. e.preventDefault();
  56. var touch = e.touches[0];
    57.                                                                                                                                                                                                      
  57.                                                                                                                                     document.getElementById("spText").innerHTML=inner.style.top;
    58.                                                          
  58.                                                                                                                        function touchEnd(e){//The finger leaves the screen
    59.                                                                                                                            The sliding position is reflected in the global variable and must be converted into an integer using parseInt();
  59. if(y>
    60. 0&
  60. >
    61. 0){//Cannot be used when sliding to the top Swipe online
    62. //
  62. inner.style.top
    63. =
  63. 0
    64. ;
    65. $("#inner").animate({top:0},200);
  65.  aboveY=0
    66. ; 
  66.                                               
  67.                                                     
    68. if(y
  68. <0&&(aboveY<(-( documentHeight-wapperHeight)))){//When sliding to the bottom, it cannot be slid offline
    69.                                                                                                                                                                                                                                                                                
  69. $("#inner").animate({top:-(documentHeight-wapperHeight)},200);  
    70. aboveY
  70. =-(documentHeight-wapperHeight); 
  71.                                                                       }//
    72. document.getElementById("outer").addEventListener('touchstart', touchStart,false);
    73. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
    74. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
    76. script
  76. >
  77. body>
    79. html
  79. >
  80. The above is the complete code of the demo. This time I used jquery because animate is used to make the sliding to the top and bottom a little flexible The following is the demo effect. You can also copy the code and access it on your mobile phone. The code is relatively simple and only achieves the effect without considering compatibility and robustness
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/3707197.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 (1) - Basic Concepts_html5 Tutorial SkillsNext article：Getting Started with HTML5 Canvas (1) - Basic Concepts_html5 Tutorial Skills

Related articles

See more