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

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

上篇文章使用html5的touch事件把簡單的滑動(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)容到剪貼板

<!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;}
h2{ width: 100%; text-align: center; }
h3{ 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">
<h2>背影</h2>
<h3>—朱自清</h3>
<p>我與父親不相見已二年余了，我最不能忘記的是他的背影。[1-2]
那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子。我從北京到徐州，打算跟著父親奔喪回家。到徐州見著父親,看見滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。父親說：“事已如此，不必難過，好在天無絕人之路！”[1-2]
回家變賣典質(zhì)，父親還了虧空；又借錢辦了喪事。這些日子，家中光景很是慘淡，一半為了喪事，一半為了父親賦閑。喪事完畢，父親要到南京謀事，我也要回北京念書，我們便同行。[1-2]
到南京時(shí)，有朋友約去游逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親因?yàn)槭旅?，本已說定不送我，叫旅館里一個(gè)熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細(xì)。但他終于不放心，怕茶房不妥帖；頗躊躇了一會(huì)。其實(shí)我那年已二十歲，北京已來往過兩三次，是沒有什么要緊的了。他躊躇了一會(huì)，終于決定還是自己送我去。我再三回勸他不必去；他只說：“不要緊，他們?nèi)ゲ缓茫?rdquo;[1-2]
我們過了江，進(jìn)了車站。我買票，他忙著照看行李。行李太多了，得向腳夫行些小費(fèi)才可過去。他便又忙著和他們講價(jià)錢。我那時(shí)真是聰明過分，總覺他說話不大漂亮，非自己插嘴不可，但他終于講定了價(jià)錢；就送我上車。他給我揀定了靠車門的一張椅子；我將他給我做的紫毛大衣鋪好座位。他囑咐我路上小心，夜里要警醒些，不要受涼。又囑托茶房好好照應(yīng)我。我心里暗笑他的迂；他們只認(rèn)得錢，托他們只是白托！而且我這樣大年紀(jì)的人，難道還不能料理自己么？[1-2]
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過去自然要費(fèi)事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時(shí)我看見他的背影，我的淚很快地流下來了。我趕緊拭干了淚。怕他看見，也怕別人看見。我再向外看時(shí)，他已抱了朱紅的橘子往回走了。過鐵道時(shí)，他先將橘子散放在地上，自己慢慢爬下，再抱起橘子走。到這邊時(shí)，我趕緊去攙他。他和我走到車上，將橘子一股腦兒放在我的皮大衣上。于是撲撲衣上的泥土，心里很輕松似的。過一會(huì)兒說：“我走了，到那邊來信！”我望著他走出去。他走了幾步，回過頭看見我，說：“進(jìn)去吧，里邊沒人。”等他的背影混入來來往往的人里，再找不著了，我便進(jìn)來坐下，我的眼淚又來了。[1-2]
近幾年來，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨(dú)力支持，做了許多大事。哪知老境卻如此頹唐！他觸目傷懷，自然情不能自已。情郁于中，自然要發(fā)之于外；家庭瑣屑便往往觸他之怒。他待我漸漸不同往日。但最近兩年不見，他終于忘卻我的不好，只是惦記著我，惦記著我的兒子。[1-2]
我北來后，他寫了一信給我，信中說道：“我身體平安，惟膀子疼痛厲害，舉箸提筆，諸多不便，大約大去之期不遠(yuǎn)矣。”我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知何時(shí)再能與他相見！ </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){//觸摸開始
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){//手指離開屏幕
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ī)訪問看看，代碼比較簡陋只是實(shí)現(xiàn)了效果還沒有考慮到兼容性和健壯性

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

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

標(biāo)簽：赤峰萍鄉(xiāng) 林芝延邊泰州大同保定

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html5 touch事件實(shí)現(xiàn)觸屏頁面上下滑動(dòng)(二)》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。