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