html5 touch事件實現觸屏頁面上下滑動(二)

時間 2019-11-19

標籤 html5 html touch 事件實現觸屏頁面上下滑動欄目 HTML5 简体版

原文原文鏈接

五一小長假哪都沒去，睡了三天，今天暈暈沉沉的投入工做了，但仍是作出了一點點效果html

上週用html5的touch事件把簡單的滑動作出來了，實現了持續頁面上下滑動的效果，參考以前html5

的文章及代碼html5 touch事件實現觸屏頁面上下滑動(一)jquery

今天主要實現了一個效果：頁面滑動到最上面和最下面的時候阻止其再繼續滑動；ajax

由於給頁面添加了touch事件那麼滾動條等其餘頁面原有的默認屬性將別改變，上篇文章裏的 demo能夠一直向上滑動或向下滑動，但現實是這樣是不可取的api

完整代碼：app

 1 <!doctype 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-5-4</title>
 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         到南京時，有朋友約去遊逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親由於事忙，本已說定不送我，叫旅館裏一個熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細。但他終於不放心，怕茶房不妥帖；頗躊躇了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有什麼要緊的了。他躊躇了一會，終於決定仍是本身送我去。我再三回勸他沒必要去；他只說：「沒關係，他們去很差！」[1-2]
30         咱們過了江，進了車站。我買票，他忙着照看行李。行李太多了，得向腳伕行些小費纔可過去。他便又忙着和他們講價錢。我那時真是聰明過度，總覺他說話不大漂亮，非本身插嘴不可，但他終於講定了價錢；就送我上車。他給我揀定了靠車門的一張椅子；我將他給我作的紫毛大衣鋪好座位。他囑咐我路上當心，夜裏要警醒些，不要受涼。又囑託茶房好好照應我。我內心暗笑他的迂；他們只認得錢，託他們只是白託！並且我這樣大年紀的人，難道還不能料理本身麼？[1-2]
31         我說道：「爸爸，你走吧。」他望車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」我看那邊月臺的柵欄外有幾個賣東西的等着顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去天然要費事些。我原本要去的，他不願，只好讓他去。我看見他戴着黑布小帽，穿着黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。但是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀着上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時我看見他的背影，個人淚很快地流下來了。我趕忙拭乾了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了硃紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，本身慢慢爬下，再抱起橘子走。到這邊時，我趕忙去攙他。他和我走到車上，將橘子一古腦兒放在個人皮大衣上。因而撲撲衣上的泥土，內心很輕鬆似的。過一下子說：「我走了，到那邊來信！」我望着他走出去。他走了幾步，回過頭看見我，說：「進去吧，裏邊沒人。」等他的背影混入來來每每的人裏，再找不着了，我便進來坐下，個人眼淚又來了。[1-2]
32         近幾年來，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨力支持，作了許多大事。哪知老境卻如此頹唐！他觸目傷懷，天然情不能自已。情鬱於中，天然要發之於外；家庭瑣屑便每每觸他之怒。他待我漸漸不一樣往日。但最近兩年不見，他終於忘卻個人很差，只是惦記着我，惦記着個人兒子。[1-2]
33         我北來後，他寫了一信給我，信中說道：「我身體平安，唯膀子疼痛厲害，舉箸提筆，諸多不便，大約大去之期不遠矣。」我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知什麼時候再能與他相見！ </p>
34         </div>
35     </div>
36 
37     <script>
38         var startX,//觸摸時的座標
39             startY,
40              x, //滑動的距離
41              y,
42              aboveY=0; // 設一個全局變量記錄上一次內部塊滑動的位置
43           var documentHeight=$("#inner").height();//內部滑動模塊的高度
44           var wapperHeight=$("#outer").height(); //外部框架的高度
45           
46 
47          var inner=document.getElementById("inner");  
48 
49             function touchStart(e){//觸摸開始
50                 e.preventDefault();
51                 var touch=e.touches[0];
52                 startY = touch.pageY;   //剛觸摸時的座標                       
53             }
54 
55             function touchMove(e){//滑動
56                  e.preventDefault();
57                 var  touch = e.touches[0];               
58                  y = touch.pageY - startY;//滑動的距離                                          
59                  inner.style.top=aboveY+y+"px";    
60                  document.getElementById("spText").innerHTML=inner.style.top;   
61                          
62                                
63             }  
64 
65             function touchEnd(e){//手指離開屏幕                         
66                  aboveY=parseInt(inner.style.top);//touch結束後記錄內部滑塊滑動的位置 在全局變量中體現 必定要用parseInt()將其轉化爲整數字;
67                   if(y>0&&aboveY>0){//當滑動到最頂端時候不能再網上滑動
68                       //inner.style.top=0;
69                        $("#inner").animate({top:0},200);
70                        aboveY=0;
71                     } 
72                   
73                   if(y<0&&(aboveY<(-(documentHeight-wapperHeight)))){//當滑動到最底部時候不能再網下滑動
74                     // inner.style.top=-(documentHeight-wapperHeight)+"px";
75                       $("#inner").animate({top:-(documentHeight-wapperHeight)},200);
76                      aboveY=-(documentHeight-wapperHeight);
77                   } 
78             }//
79              document.getElementById("outer").addEventListener('touchstart', touchStart,false);  
80              document.getElementById("outer").addEventListener('touchmove', touchMove,false);  
81              document.getElementById("outer").addEventListener('touchend', touchEnd,false);  
82     </script>
83 </body>
84 
85 </html>