您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“html5中touch事件如何實(shí)現(xiàn)觸屏頁(yè)面上下滑動(dòng)”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5中touch事件如何實(shí)現(xiàn)觸屏頁(yè)面上下滑動(dòng)”這篇文章吧。
因?yàn)榻o頁(yè)面添加了touch事件那么滾動(dòng)條等其他頁(yè)面原有的默認(rèn)屬性將別改變,上篇文章里的 demo可以一直向上滑動(dòng)或向下滑動(dòng),但現(xiàn)實(shí)是這樣是不可取的
完整代碼:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-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: 30px 10px; } #inner p{line-height: 30px; letter-spacing: 3px; text-indent:2em;} #spText{ height: 40px; width: 100%;border:1px solid red;} h3{ width: 100%; text-align: center; } h4{ width: 100%; padding-left:60%;} </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> </head> <body> <div id="spText"></div> <div id="spText2"></div> <div id="outer"> <div id="inner"> <h3>背影</h3> <h4>—朱自清</h4> <p>我與父親不相見(jiàn)已二年余了,我最不能忘記的是他的背影。[1-2] 那年冬天,祖母死了,父親的差使也交卸了,正是禍不單行的日子。我從北京到徐州,打算跟著父親奔喪回家。到徐州見(jiàn)著父親,看見(jiàn)滿(mǎn)院狼藉的東西,又想起祖母,不禁簌簌地流下眼淚。父親說(shuō):“事已如此,不必難過(guò),好在天無(wú)絕人之路!”[1-2] 回家變賣(mài)典質(zhì),父親還了虧空;又借錢(qián)辦了喪事。這些日子,家中光景很是慘淡,一半為了喪事,一半為了父親賦閑。喪事完畢,父親要到南京謀事,我也要回北京念書(shū),我們便同行。[1-2] 到南京時(shí),有朋友約去游逛,勾留了一日;第二日上午便須渡江到浦口,下午上車(chē)北去。父親因?yàn)槭旅?,本已說(shuō)定不送我,叫旅館里一個(gè)熟識(shí)的茶房陪我同去。他再三囑咐茶房,甚是仔細(xì)。但他終于不放心,怕茶房不妥帖;頗躊躇了一會(huì)。其實(shí)我那年已二十歲,北京已來(lái)往過(guò)兩三次,是沒(méi)有什么要緊的了。他躊躇了一會(huì),終于決定還是自己送我去。我再三回勸他不必去;他只說(shuō):“不要緊,他們?nèi)ゲ缓?!”[1-2] 我們過(guò)了江,進(jìn)了車(chē)站。我買(mǎi)票,他忙著照看行李。行李太多了,得向腳夫行些小費(fèi)才可過(guò)去。他便又忙著和他們講價(jià)錢(qián)。我那時(shí)真是聰明過(guò)分,總覺(jué)他說(shuō)話(huà)不大漂亮,非自己插嘴不可,但他終于講定了價(jià)錢(qián);就送我上車(chē)。他給我揀定了靠車(chē)門(mén)的一張椅子;我將他給我做的紫毛大衣鋪好座位。他囑咐我路上小心,夜里要警醒些,不要受涼。又囑托茶房好好照應(yīng)我。我心里暗笑他的迂;他們只認(rèn)得錢(qián),托他們只是白托!而且我這樣大年紀(jì)的人,難道還不能料理自己么?[1-2] 我說(shuō)道:“爸爸,你走吧?!彼?chē)外看了看,說(shuō):“我買(mǎi)幾個(gè)橘子去。你就在此地,不要走動(dòng)?!蔽铱茨沁呍屡_(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái),須穿過(guò)鐵道,須跳下去又爬上去。父親是一個(gè)胖子,走過(guò)去自然要費(fèi)事些。我本來(lái)要去的,他不肯,只好讓他去。我看見(jiàn)他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難??墒撬┻^(guò)鐵道,要爬上那邊月臺(tái),就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。這時(shí)我看見(jiàn)他的背影,我的淚很快地流下來(lái)了。我趕緊拭干了淚。怕他看見(jiàn),也怕別人看見(jiàn)。我再向外看時(shí),他已抱了朱紅的橘子往回走了。過(guò)鐵道時(shí),他先將橘子散放在地上,自己慢慢爬下,再抱起橘子走。到這邊時(shí),我趕緊去攙他。他和我走到車(chē)上,將橘子一股腦兒放在我的皮大衣上。于是撲撲衣上的泥土,心里很輕松似的。過(guò)一會(huì)兒說(shuō):“我走了,到那邊來(lái)信!”我望著他走出去。他走了幾步,回過(guò)頭看見(jiàn)我,說(shuō):“進(jìn)去吧,里邊沒(méi)人。”等他的背影混入來(lái)來(lái)往往的人里,再找不著了,我便進(jìn)來(lái)坐下,我的眼淚又來(lái)了。[1-2] 近幾年來(lái),父親和我都是東奔西走,家中光景是一日不如一日。他少年出外謀生,獨(dú)力支持,做了許多大事。哪知老境卻如此頹唐!他觸目傷懷,自然情不能自已。情郁于中,自然要發(fā)之于外;家庭瑣屑便往往觸他之怒。他待我漸漸不同往日。但最近兩年不見(jiàn),他終于忘卻我的不好,只是惦記著我,惦記著我的兒子。[1-2] 我北來(lái)后,他寫(xiě)了一信給我,信中說(shuō)道:“我身體平安,惟膀子疼痛厲害,舉箸提筆,諸多不便,大約大去之期不遠(yuǎn)矣。”我讀到此處,在晶瑩的淚光中,又看見(jiàn)那肥胖的、青布棉袍黑布馬褂的背影。唉!我不知何時(shí)再能與他相見(jiàn)! </p> </div> </div> <script> var startX,//觸摸時(shí)的坐標(biāo) startY, x, //滑動(dòng)的距離 y, aboveY=0; // 設(shè)一個(gè)全局變量記錄上一次內(nèi)部塊滑動(dòng)的位置 var documentHeight=$("#inner").height();//內(nèi)部滑動(dòng)模塊的高度 var wapperHeight=$("#outer").height(); //外部框架的高度 var inner=document.getElementById("inner"); function touchStart(e){//觸摸開(kāi)始 e.preventDefault(); var touch=e.touches[0]; startY = touch.pageY; //剛觸摸時(shí)的坐標(biāo) } function touchMove(e){//滑動(dòng) e.preventDefault(); var touch = e.touches[0]; y = touch.pageY - startY;//滑動(dòng)的距離 inner.style.top=aboveY+y+"px"; document.getElementById("spText").innerHTML=inner.style.top; } function touchEnd(e){//手指離開(kāi)屏幕 aboveY=parseInt(inner.style.top);//touch結(jié)束后記錄內(nèi)部滑塊滑動(dòng)的位置 在全局變量中體現(xiàn) 一定要用parseInt()將其轉(zhuǎn)化為整數(shù)字; if(y>0&>0){//當(dāng)滑動(dòng)到最頂端時(shí)候不能再網(wǎng)上滑動(dòng) //inner.style.top=0; $("#inner").animate({top:0},200); aboveY=0; } if(y<0&&(aboveY<(-(documentHeight-wapperHeight)))){//當(dāng)滑動(dòng)到最底部時(shí)候不能再網(wǎng)下滑動(dòng) // 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,因?yàn)橛玫搅薬nimate 可以讓滑動(dòng)到最上面和最下面有點(diǎn)彈性
下面是demo效果,你也可以將代碼copy用手機(jī)訪(fǎng)問(wèn)看看,代碼比較簡(jiǎn)陋只是實(shí)現(xiàn)了效果還沒(méi)有考慮到兼容性和健壯性
以上是“html5中touch事件如何實(shí)現(xiàn)觸屏頁(yè)面上下滑動(dòng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。