Html5 touch event: sliding up and down a touch screen page (2), html5touch
In the previous article, simple sliding was implemented using the html5 touch event to achieve continuous page sliding up and down. refer to the previous article and the code html5 touch event to achieve the sliding of the touch screen page (1)
This article mainly implements an effect: When the page slides to the top and bottom, it is prevented from moving on;
Because a touch event is added to the page, the original default properties of the scroll bar and other pages will not be changed. The demo in the previous article can always slide up or down, but the reality is that this is not desirable.
Complete code:
Copy XML/HTML Code to clipboard
- <! Doctype html>
- <Html lang = "en">
- <Head>
- <Meta charset = "UTF-8">
- <Meta name = "viewport" content = "width = device-width, initial-scale = 1 user-scalable = 0"/>
- <Title> 2014-5-4 </title>
- <Style>
- * {Margin: 0; padding: 0 ;}
- # Outer {width: 90%; height: 490px; background: #000; margin: auto; overflow: hidden ;}
- # Inner {width: 80%; background: # e4e4e4; margin: auto; position: relative; top: 0px; font-size: 1em; padding: 30px 10px ;}
- # Inner p {line-height: 30px; letter-spacing: 3px; text-indent: 2em ;}
- # SpText {height: 40px; width: 100%; border: 1px solid red ;}
- H2 {width: 100%; text-align: center ;}
- H3 {width: 100%; padding-left: 60% ;}
- </Style>
- <Script src = 'HTTP: // ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'> </script>
- </Head>
- <Body>
- <Div id = "spText"> </div>
- <Div id = "spText2"> </div>
- <Div id = "outer">
- <Div id = "inner">
- <H2> back
- <H3>-Zhu Ziqing
- <P> my father and I have not met each other for more than two years. The last thing I can forget is his background. [1-2]
- In the winter of that year, my grandmother died, and my father's bad fortune was lost. I plan to go home with my father from Beijing to Xuzhou. When I saw my father in Xuzhou, I saw a mess in the courtyard and remembered my grandmother. I couldn't help but shed tears. My father said, "This is already the case. You don't have to worry about it. Fortunately, there is no path to death !" [1-2]
- When I went home to sell the goods, my father suffered a loss and borrowed money to do the funeral. In these days, the light scene in the family is very bleak, half for funeral, half for Father idle. After the funeral is over, my father will go to Nanjing to seek advice. I will go back to Beijing to study, and we will walk with me. [1-2]
- When I arrived in Nanjing, some friends made a visit and stayed for a day. On the morning of the next day, they had to cross the river to pukou and get on the bus to the north in the afternoon. My father told me that he would not send me because he was busy. He told me to accompany me with a well-known Tea House in the hotel. He repeatedly told the tea room carefully. But at last he was not at ease, fearing that the tea room would not be proper; he hesitated for a while. As a matter of fact, I was 20 years old and had been in Beijing for two or three times. It doesn't matter. After a while, he finally decided to let me go. I repeatedly urged him not to go; he only said, "It doesn't matter. They can't go well !" [1-2]
- We crossed the river and entered the station. I bought a ticket and he was busy looking after his luggage. There are too many luggage, so you have to tip your feet. He was busy talking to them about the price. At that time, I was so intelligent that I always felt that he was not very beautiful, but he had to intercept his mouth, but he finally decided on the price and sent me to the bus. He picked a chair by the door for me, and I laid the seats with his purple coat. He told me to be careful on the road. I should watch out at night and avoid getting cold. I also asked the tea room to take care of me. I smiled at his secret; they only recognize money, and they only trust in white! In addition, can't I cook myself as a person of my age? [1-2]
- I said, "Dad, let's go ." He looked out and said, "I want to buy some oranges. You are here, don't move around ." I think there are a few sellers waiting for customers outside the fence of the platform. When I walked over the platform, I had to go through the railway. I had to jump down and climb up again. My father is a fat man. It takes some trouble to go over. I was supposed to go. He refused, so he had to go. I saw him wearing a black cloth, a big horse, a dark blue cloth, and a cotton gown. he stumbled over to the railway and slowly leaned over. However, it is not easy for him to climb the platform over the railway. He climbed his hands up and his feet up and down; his obese body leaned down to the left, showing the effort. At this moment I saw his back, my tears quickly shed. I quickly wiped my tears. For fear of seeing him or others. When I looked out again, he went back with the red oranges. When he crossed the railway, he first dispersed the oranges on the ground, slowly climbed down, and then picked up the oranges. When I got here, I had to pick him up. He and I went to the car and put the oranges in my fur coat. So I flat the dirt on my clothes and feel very relaxed. After a while, I said, "I'm leaving. Please send a letter over there !" I watched him go out. He took a few steps and looked back at me and said, "Go in, no one is in ." When his back is mixed into the people who come and go, I can't find it. Then I come in and sit down, and my tears come again. [1-2]
- In the past few years, my father and I have both traveled east and west, and the scenery in my family is not as good as a day. He went out to earn a living and supported him independently. He did many things. I don't know how old the world is! He was so sad that he could not feel himself. Feeling depressed in the middle, naturally to the outside; Family Xiao often touch his anger. He gradually moved on to me. But in the last two years, he finally forgot about my bad habits, but missed me and my son. [1-2]
- After I arrived in North China, he wrote a letter to me, saying: "I am safe, but my arm is very painful. It is inconvenient to give up a pen. It is not long before I go ." I read that, in the tears, I saw the back of the fat, blue cloth, cotton gown, and black cloth. Alas! I don't know when to meet him again! </P>
- </Div>
- </Div>
- <Script>
- Var startX, // coordinates of the touch
- StartY,
- X, // sliding distance
- Y,
- AboveY = 0; // set a global variable to record the position of the last internal slide
- Var sliding entheight = $ ("# inner"). height (); // height of the internal sliding Module
- Var wapperHeight = $ ("# outer"). height (); // The height of the External Frame
- Var inner = document. getElementById ("inner ");
- Function touchStart (e) {// touch start
- E. preventDefault ();
- Var touch = e. touches [0];
- StartY = touch. pageY; // coordinates of the last touch
- }
- Function touchMove (e) {// slide
- E. preventDefault ();
- Var touch = e. touches [0];
- Y = touch. pageY-startY; // sliding distance
- Inner. style. top = aboveY + y + "px ";
- Document. getElementById ("spText"). innerHTML = inner. style. top;
- }
- Function touchEnd (e) {// exit the screen with your finger
- AboveY = parseInt (inner. style. top); // After the touch ends, record the position where the internal slider slides. In the global variable, you must use parseInt () to convert it to an integral number;
- If (y> 0 &> 0) {// when sliding to the top, you cannot slide online.
- // Inner. style. top = 0;
- $ ("# Inner"). animate ({top: 0}, 200 );
- AboveY = 0;
- }
- If (y <0 & (aboveY <(-(incluentheight-wapperHeight) {// when sliding to the bottom, you cannot slide offline.
- // Inner. style. top =-(incluentheight-wapperHeight) + "px ";
- $ ("# Inner"). animate ({top:-(incluentheight-wapperHeight)}, 200 );
- AboveY =-(incluentheight-wapperHeight );
- }
- }//
- Document. getElementById ("outer"). addEventListener ('touchstart', touchstart, false );
- Document. getElementById ("outer"). addEventListener ('touchmove ', touchmove, false );
- Document. getElementById ("outer"). addEventListener ('touchend', touchend, false );
- </Script>
- </Body>
- </Html>
The above is the complete demo code. The jquery used this time is a little elastic because animate can be used to slide to the top and bottom.
The following is the demo effect. You can also use the mobile phone to copy the Code. The Code is simple, but the effect has not been taken into account for compatibility and robustness.
The above is all the content of this article, hoping to help you learn.
Original article: http://www.cnblogs.com/leinov/p/3707197.html
