主頁 > 知識(shí)庫(kù) > html5 touch事件實(shí)現(xiàn)觸屏頁面上下滑動(dòng)(二)

html5 touch事件實(shí)現(xiàn)觸屏頁面上下滑動(dòng)(二)

熱門標(biāo)簽:中紳電銷智能機(jī)器人 漳州人工外呼系統(tǒng)排名 ai電銷機(jī)器人連接網(wǎng)關(guān) 跟電銷機(jī)器人做同事 鶴壁手機(jī)自動(dòng)外呼系統(tǒng)怎么安裝 濟(jì)南辦理400電話 鄭州電銷外呼系統(tǒng)違法嗎 威海營(yíng)銷外呼系統(tǒng)招商 農(nóng)村住宅地圖標(biāo)注

上篇文章使用html5的touch事件把簡(jiǎn)單的滑動(dòng)做出來了,實(shí)現(xiàn)了持續(xù)頁面上下滑動(dòng)的效果,參考之前的文章及代碼html5 touch事件實(shí)現(xiàn)觸屏頁面上下滑動(dòng)(一)

本文主要實(shí)現(xiàn)了一個(gè)效果:頁面滑動(dòng)到最上面和最下面的時(shí)候阻止其再繼續(xù)滑動(dòng);

因?yàn)榻o頁面添加了touch事件那么滾動(dòng)條等其他頁面原有的默認(rèn)屬性將別改變,上篇文章里的 demo可以一直向上滑動(dòng)或向下滑動(dòng),但現(xiàn)實(shí)是這樣是不可取的

完整代碼:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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.         回家變賣典質(zhì),父親還了虧空;又借錢辦了喪事。這些日子,家中光景很是慘淡,一半為了喪事,一半為了父親賦閑。喪事完畢,父親要到南京謀事,我也要回北京念書,我們便同行。[1-2]   
  29.         到南京時(shí),有朋友約去游逛,勾留了一日;第二日上午便須渡江到浦口,下午上車北去。父親因?yàn)槭旅?,本已說定不送我,叫旅館里一個(gè)熟識(shí)的茶房陪我同去。他再三囑咐茶房,甚是仔細(xì)。但他終于不放心,怕茶房不妥帖;頗躊躇了一會(huì)。其實(shí)我那年已二十歲,北京已來往過兩三次,是沒有什么要緊的了。他躊躇了一會(huì),終于決定還是自己送我去。我再三回勸他不必去;他只說:“不要緊,他們?nèi)ゲ缓茫?rdquo;[1-2]   
  30.         我們過了江,進(jìn)了車站。我買票,他忙著照看行李。行李太多了,得向腳夫行些小費(fèi)才可過去。他便又忙著和他們講價(jià)錢。我那時(shí)真是聰明過分,總覺他說話不大漂亮,非自己插嘴不可,但他終于講定了價(jià)錢;就送我上車。他給我揀定了靠車門的一張椅子;我將他給我做的紫毛大衣鋪好座位。他囑咐我路上小心,夜里要警醒些,不要受涼。又囑托茶房好好照應(yīng)我。我心里暗笑他的迂;他們只認(rèn)得錢,托他們只是白托!而且我這樣大年紀(jì)的人,難道還不能料理自己么?[1-2]   
  31.         我說道:“爸爸,你走吧。”他望車外看了看,說:“我買幾個(gè)橘子去。你就在此地,不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺(tái),須穿過鐵道,須跳下去又爬上去。父親是一個(gè)胖子,走過去自然要費(fèi)事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難。可是他穿過鐵道,要爬上那邊月臺(tái),就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。這時(shí)我看見他的背影,我的淚很快地流下來了。我趕緊拭干了淚。怕他看見,也怕別人看見。我再向外看時(shí),他已抱了朱紅的橘子往回走了。過鐵道時(shí),他先將橘子散放在地上,自己慢慢爬下,再抱起橘子走。到這邊時(shí),我趕緊去攙他。他和我走到車上,將橘子一股腦兒放在我的皮大衣上。于是撲撲衣上的泥土,心里很輕松似的。過一會(huì)兒說:“我走了,到那邊來信!”我望著他走出去。他走了幾步,回過頭看見我,說:“進(jìn)去吧,里邊沒人。”等他的背影混入來來往往的人里,再找不著了,我便進(jìn)來坐下,我的眼淚又來了。[1-2]   
  32.         近幾年來,父親和我都是東奔西走,家中光景是一日不如一日。他少年出外謀生,獨(dú)力支持,做了許多大事。哪知老境卻如此頹唐!他觸目傷懷,自然情不能自已。情郁于中,自然要發(fā)之于外;家庭瑣屑便往往觸他之怒。他待我漸漸不同往日。但最近兩年不見,他終于忘卻我的不好,只是惦記著我,惦記著我的兒子。[1-2]   
  33.         我北來后,他寫了一信給我,信中說道:“我身體平安,惟膀子疼痛厲害,舉箸提筆,諸多不便,大約大去之期不遠(yuǎn)矣。”我讀到此處,在晶瑩的淚光中,又看見那肥胖的、青布棉袍黑布馬褂的背影。唉!我不知何時(shí)再能與他相見! </p>  
  34.         </div>  
  35.     </div>  
  36.   
  37.     <script>  
  38.         var startX,//觸摸時(shí)的坐標(biāo)   
  39.             startY,   
  40.              x, //滑動(dòng)的距離   
  41.              y,   
  42.              aboveY=0; // 設(shè)一個(gè)全局變量記錄上一次內(nèi)部塊滑動(dòng)的位置   
  43.           var documentHeight=$("#inner").height();//內(nèi)部滑動(dòng)模塊的高度   
  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;   //剛觸摸時(shí)的坐標(biāo)                          
  53.             }   
  54.   
  55.             function touchMove(e){//滑動(dòng)   
  56.                  e.preventDefault();   
  57.                 var  touch = e.touches[0];                  
  58.                  y = touch.pageY - startY;//滑動(dòng)的距離                                             
  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結(jié)束后記錄內(nèi)部滑塊滑動(dòng)的位置 在全局變量中體現(xiàn) 一定要用parseInt()將其轉(zhuǎn)化為整數(shù)字;   
  67.                   if(y>0&>0){//當(dāng)滑動(dòng)到最頂端時(shí)候不能再網(wǎng)上滑動(dòng)   
  68.                       //inner.style.top=0;   
  69.                        $("#inner").animate({top:0},200);   
  70.                        aboveY=0;   
  71.                     }    
  72.                      
  73.                   if(y<0&&(aboveY<(-(documentHeight-wapperHeight)))){//當(dāng)滑動(dòng)到最底部時(shí)候不能再網(wǎng)下滑動(dòng)   
  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>  
     

   上面是demo的完整代碼,這次使用的jquery,因?yàn)橛玫搅薬nimate 可以讓滑動(dòng)到最上面和最下面有點(diǎn)彈性

   下面是demo效果,你也可以將代碼copy用手機(jī)訪問看看,代碼比較簡(jiǎn)陋只是實(shí)現(xiàn)了效果還沒有考慮到兼容性和健壯性

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。

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

標(biāo)簽:營(yíng)口 蘇州 萍鄉(xiāng) 甘南 文山 紅河 惠州 咸陽

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html5 touch事件實(shí)現(xiàn)觸屏頁面上下滑動(dòng)(二)》,本文關(guān)鍵詞  html5,touch,事件,實(shí)現(xiàn),觸屏,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html5 touch事件實(shí)現(xiàn)觸屏頁面上下滑動(dòng)(二)》相關(guān)的同類信息!
  • 本頁收集關(guān)于html5 touch事件實(shí)現(xiàn)觸屏頁面上下滑動(dòng)(二)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章