html5 touch事件實現觸控螢幕頁面上下滑動(二)_html5教學技巧

上篇文章使用html5的touch事件把簡單的滑動做出來了，實現了持續頁面上下滑動的效果，參考之前的文章及代碼html5 touch事件實現觸屏頁面上下滑動(一)

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

因為給頁面添加了touch事件那麼滾動條等其他頁面原有的預設屬性將別改變，上篇文章裡的demo可以一直向上滑動或向下滑動，但現實是這樣是不可取的

完整程式碼：

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html lang="en" >  
3. 頭>  
4.     元 字符集 字符集 字符集
 
5. 字符集 字符集 字符集 字符集>       元
 
6. 名稱="視口"  內容="width=device-width,initial-scale=1 user-scalable=0" />  
7.     標題>2014-5-4>
8. 2014-5-4>
2014-5-4
9. >2014-5-4
>
10. 2014-5-4>
11. 2014-5-4>
2014-5-4
12. >2014-5-4
>
13. 🎜>標題
14. >       樣式>          * {邊距：0;  填入：0;}        #outer{ 寬度：90%； 高度：490 像素； 背景：#000； 邊距：自動；  溢位：隱藏；}       #inner{width:80%;  背景：#e4e4e4； 邊距：自動； 職位：親屬； 頂部：0px； 字體大小：1em； 內邊距：30 像素10 像素     #inner p{line-height: 30px; 字母間距：3px； 文字縮排：2em;}        #spText{ 高度：40px; 寬度：100%；邊框：1px 純紅色；}        h2{ 寬度：100%； 文字對齊：居中； }        h3{ 寬度：100%； 左填充：60%；}  
15.     樣式>  
16.        腳本 src='http: / /ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'>
腳本
17. 腳本>  
18. 頭>  
身體
20. >      div id="spText"
>
21. div>   div id="spText2"
>
22. div>       div 
id
23. ="外部" >           div 
div
24.  div >               
h2
25. >h2>h2>               
26. h3>h3>>  
27.                        ,
29.         那年冬天，祖母死了，父親的差使也交卸了，真是禍不單行的日子。我從北京到徐州，打算跟著父親奔喪回家。到徐州見父親，看見滿院狼的東西，又想起奶奶，不禁簌簌地流下眼淚。父親說：「事已如此，必要，好在天無絕人之路！」[1-2]            回家賣變典質，父親還了虧空；又藉錢辦了喪事。這幾天，家中光景很慘淡，一半為了喪事，一半為了父親賦博。喪事完畢，父親要到南京謀事，我也要回北京念書，我們便同行。 [1-2]            到南京時，有朋友約去逛街，並勾留了一日；隔天上午便須渡江到浦口，下午就車北去。因為父親事忙，本已說定不送我，叫旅館裡一個熟識的茶房陪我同去。他又三囑咐茶房，甚是近了。但他終於不放心了，怕茶房不夠貼文；頗躊躇了會。其實我那年已經二十歲了，北京已來往過兩次，是沒有什麼好緊張的了。他躊躇了會，終於決定還是自己送我去。我再三回勸他不必去；他只說：「不要緊，他們去不好！」[1-2]   
30.         我們過了江，並進了車站。我買票，他忙著照顧行李。行李太多了，得向腳夫行些小費才可過去。他便又忙著和他們講價錢。我那時真是聰明過分，總覺他說話不大漂亮，非自己插嘴不可，但他終於講定了價錢；就送我上車。祂為我揀定了靠車門的一張椅子；我將祂為我做的紫毛大衣鋪好座位。他囑咐我路上小心，夜裡要警醒些，不要受涼。又囑咐托茶房好好照應我。我心裡暗笑他的迂；他們只認得錢，託他們只是白托！而且我這樣大年紀的人，還不能料理自己呢？ [1-2]   
31.         我說：「爸爸，你走吧。」他望車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」我看那邊月台的柵欄外有幾個賣東西的等著顧客。走到那邊月台，須穿過鐵道，須跳下去又爬上去。父親是個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月台，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時我看見他的背影，我的淚很快地流下來了。我趕緊拭乾了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了朱紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，自己慢慢爬下，再抱起橘子走。到這邊時，我趕緊去攙他。他和我走到車上，將橘子一股腦兒放在我的皮大衣上。於是撲撲衣上的泥土，心裡很輕鬆似的。過一會兒說：「我走了，到那邊來信！」我望著他走出去。他走了幾步，回過頭看見我，說：「進去吧，裡邊沒人。」等他的背影混入來來去去的人裡，再找不著了，我便進來坐下，我的眼淚又來了。 [1-2]   
32.         近年來，我和父親都是東奔西走，家中光景是一天不如一日。他少年出外謀生，獨力支持，做了許多大事。哪知老境卻如此頹唐！他觸目傷懷，自然情不能自已。情鬱於中，自然要發之於外；家庭瑣屑便常觸他之怒。他待我漸漸不同往日。但最近兩年不見，他終於忘卻我的不好，只是惦記得我，想著我的兒子。 [1-2]   
33.         我北來後，他寫了一信給我，信中說：「我身體平安，惟膀子疼痛厲害，舉簸提筆，諸多不便，大約大去之期不遠矣。 「我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知何時再能與他相見！ p>  
34.         div>  
35.     div>  
36.   
37.        
script
38. >
  
  
41.         var startX,//觸摸時的座標   
42.             startY,                 x, //滑動的距離                 y,   
43.              aboveY=
0
44. ; // 設一個全局變量記錄上一次內部塊滑動的位置             var 
documentHeight
45. =$("#inner").height();//內部滑動滑p>
          var 
46. wapperHeight
=$("#outer").height(); ///外部框架的高度  
47.                           var 
inner
48. =
49.   
50.             function touchStart(e){//觸控開始   
51.                 e.preventDefault();                    var touch >
                
52. startY                                      }  
53.   
54.             function touchMove(e){//滑動   
55.                  e.preventDefault();   
56.                 var  touch                               y
57.                                                         inner.style.top                  document.getElementById("spText")
>;
58.                                                                          }     
59.                function touchEnd(e){//手指離開螢幕                             
60. aboveY=
61. aboveY=
62. aboveY=
63. aboveY=
64. aboveY=滑動的位置 在全域變數中體現 一定要用parseInt()轉換為整數位;   
65.                   if(y>滑動                         //
inner. 🎜>
66.                        $("#inner").animate({top:0},200)                           aboveY
67.                     }
if(y
69. <0&&(aboveY<(-( documentHeight-wapperHeight)))){//一番下にスライドするとオフラインではスライドできません
70. $("#inner").animate({top:-(documentHeight-wapperHeight)},200);
上 Y
71. =-(documentHeight-wapperHeight);
72. }//
document.getElementById("outer").addEventListener('touchstart', touchStart,false);
document.getElementById("outer").addEventListener('touchmove', touchMove,false);
document.getElementById("outer").addEventListener('touchend', touchEnd,false);
スクリプト
77. >
78. ボディ>
html
80. >
81. 上記はデモの完全なコードです。今回は上下へのスライドを少し柔軟にするために animate を使用しているため、jquery を使用しました。 以下はデモの効果です。コードをコピーして携帯電話でアクセスすることもできます。このコードは互換性や堅牢性を考慮せずにのみ効果を実現します。
    以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

原文:

http://www.cnblogs.com/leinov/p/3707197.html