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

2020-03-24 17:32:25

字體：大中小

來源：轉載

供稿：網友

上篇文章使用html5的touch事件把簡單的滑動做出來了，實現了持續頁面上下滑動的效果，參考之前的文章及代碼html5 touch事件實現觸屏頁面上下滑動(一)本文主要實現了一個效果：頁面滑動到最上面和最下面的時候阻止其再繼續滑動；因為給頁面添加了touch事件那么滾動條等其他頁面原有的默認屬性將別改變，上篇文章里的 demo可以一直向上滑動或向下滑動，但現實是這樣是不可取的完整代碼：
XML/HTML Code復制內容到剪貼板
metacharset= UTF-8 metaname= viewport content= width=device-width,initial-scale=1user-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:30px10px;} #innerp{line-height:30px;letter-spacing:3px;text-indent:2em;} #spText{height:40px;width:100%;border:1pxsolidred;} h2{width:100%;text-align:center;} h3{width:100%;padding-left:60%;} /style scriptsrc='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' /script /head body divid= spText /div divid= spText2 /div divid= outer divid= inner h2 背影 /h2 h3 朱自清 /h3 p 我與父親不相見已二年余了，我最不能忘記的是他的背影。[1-2] 那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子。我從北京到徐州，打算跟著父親奔喪回家。到徐州見著父親,看見滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。父親說：事已如此，不必難過，好在天無絕人之路！ [1-2] 回家變賣典質，父親還了虧空；又借錢辦了喪事。這些日子，家中光景很是慘淡，一半為了喪事，一半為了父親賦閑。喪事完畢，父親要到南京謀事，我也要回北京念書，我們便同行。[1-2] 到南京時，有朋友約去游逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親因為事忙，本已說定不送我，叫旅館里一個熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細。但他終于不放心，怕茶房不妥帖；頗躊躇了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有什么要緊的了。他躊躇了一會，終于決定還是自己送我去。我再三回勸他不必去；他只說：不要緊，他們去不好！ [1-2] 我們過了江，進了車站。我買票，他忙著照看行李。行李太多了，得向腳夫行些小費才可過去。他便又忙著和他們講價錢。我那時真是聰明過分，總覺他說話不大漂亮，非自己插嘴不可，但他終于講定了價錢；就送我上車。他給我揀定了靠車門的一張椅子；我將他給我做的紫毛大衣鋪好座位。他囑咐我路上小心，夜里要警醒些，不要受涼。又囑托茶房好好照應我。我心里暗笑他的迂；他們只認得錢，托他們只是白托！而且我這樣大年紀的人，難道還不能料理自己么？[1-2] 我說道：爸爸，你走吧。他望車外看了看，說：我買幾個橘子去。你就在此地，不要走動。我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時我看見他的背影，我的淚很快地流下來了。我趕緊拭干了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了朱紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，自己慢慢爬下，再抱起橘子走。到這邊時，我趕緊去攙他。他和我走到車上，將橘子一股腦兒放在我的皮大衣上。于是撲撲衣上的泥土，心里很輕松似的。過一會兒說：我走了，到那邊來信！我望著他走出去。他走了幾步，回過頭看見我，說：進去吧，里邊沒人。等他的背影混入來來往往的人里，再找不著了，我便進來坐下，我的眼淚又來了。[1-2] 近幾年來，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨力支持，做了許多大事。哪知老境卻如此頹唐！他觸目傷懷，自然情不能自已。情郁于中，自然要發之于外；家庭瑣屑便往往觸他之怒。他待我漸漸不同往日。但最近兩年不見，他終于忘卻我的不好，只是惦記著我，惦記著我的兒子。[1-2] 我北來后，他寫了一信給我，信中說道：我身體平安，惟膀子疼痛厲害，舉箸提筆，諸多不便，大約大去之期不遠矣。我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知何時再能與他相見！ /p /div /div script varstartX,//觸摸時的坐標 startY, x,//滑動的距離 y, aboveY=0;//設一個全局變量記錄上一次內部塊滑動的位置 vardocumentHeight=$( #inner ).height();//內部滑動模塊的高度 varwapperHeight=$( #outer ).height();//外部框架的高度 varinner=document.getElementById( inner functiontouchStart(e){//觸摸開始 e.preventDefault(); vartouch=e.touches[0]; startY=touch.pageY;//剛觸摸時的坐標 } functiontouchMove(e){//滑動 e.preventDefault(); vartouch=e.touches[0]; y=touch.pageY-startY;//滑動的距離 inner.style.top=aboveY+y+ px document.getElementById( spText ).innerHTML=inner.style.top; } functiontouchEnd(e){//手指離開屏幕 aboveY=parseInt(inner.style.top);//touch結束后記錄內部滑塊滑動的位置在全局變量中體現一定要用parseInt()將其轉化為整數字; if(y 0 0){//當滑動到最頂端時候不能再網上滑動 //inner.style.top=0; $( #inner ).animate({top:0},200); aboveY=0; } if(y 0 (aboveY (-(documentHeight-wapperHeight)))){//當滑動到最底部時候不能再網下滑動 //inner.style.top=-(documentHeight-wapperHeight)+ px $( #inner ).animate({top:-(documentHeight-wapperHeight)},200); aboveY=-(documentHeight-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

上面是demo的完整代碼，這次使用的jquery，因為用到了animate 可以讓滑動到最上面和最下面有點彈性下面是demo效果，你也可以將代碼copy用手機訪問看看，代碼比較簡陋只是實現了效果還沒有考慮到兼容性和健壯性以上就是本文的全部內容，希望對大家的學習有所幫助。原文：http://www.cnblogs.com/leinov/p/3707197.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html中的錨點和頁面跳轉

下一篇：html5實現canvas陰影效果示例