向上滑動(dòng)隱藏底部懸浮框，向下滑動(dòng)顯示懸浮框。使用pc端瀏覽器查看請(qǐng)把瀏覽器設(shè)置為手機(jī)瀏覽器模式。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>手機(jī)端觸屏手指滑動(dòng)方向</title><meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport"><script type="text/javascript">var currntY = 0;var lastY = 0;var touch_screen = { //方向 direction: { direction: "", object: null, start: function() { var self = this, obj = self.object; obj.addEventListener('touchstart', function(e) { self.move(); }, false); obj.addEventListener('touchend', function(e) { //self.move(); lastY = document.body.scrollTop; }, false); }, //拖動(dòng)滑動(dòng)時(shí) move: function() { var self = this; self.object.addEventListener('touchmove', function(e) { currntY = document.body.scrollTop; var direct = currntY - lastY; if (direct > 0) { self.direction = "down"; document.getElementById("nav").style.visibility="hidden";//隱藏 } else if (direct < 0) { self.direction = "up"; document.getElementById("nav").style.visibility="visible";//顯示 } if(currntY == 0){ self.direction = "top"; } else if((currntY + window.screen.availHeight) == document.body.clientHeight){ self.direction = "bottom"; document.getElementById("nav").style.visibility="visible";//顯示 } document.getElementById('nav').innerHTML= self.direction; //document.getElementById('nav').innerHTML= currntY + "|" + window.screen.availHeight + "|" + document.body.clientHeight; lastY = document.body.scrollTop; }, false); }, //通過(guò)一個(gè)dom對(duì)象進(jìn)行初始化 init: function(a) { var class_clone = function(source) { var result={}; for (var key in source) { result[key] = typeof source[key]==="object" ? class_clone(source[key]) : source[key]; } return result; } var self = class_clone(touch_screen.direction); self.object = document.getElementById(a); if (!self.object) { alert('bind_object is not an object'); return false; } self.start(); } }}//頁(yè)面加載完成window.onload = function() { touch_screen.direction.init("inner");}</script><style> * {margin: 0; padding: 0;} #outer{ width:90%; height: 100%; 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;} #nav { width:100%; height: 50px; border: 1px solid #D4CD49; background: #947674;text-align: center; position:fixed;left:0;bottom:0; } #nav2 { width:100%; height: 50px; border: 1px solid #D4CD49;background: #947674;} h2{ width: 100%; text-align: center; } h3{ width: 100%; padding-left:60%;} </style> </head><body><div id="spText2"></div> <div id="outer"> <div id="inner"> <h2>背影</h2> <h3>―朱自清</h3> <p>我與父親不相見(jiàn)已二年余了，我最不能忘記的是他的背影。 那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子。我從北京到徐州，打算跟著父親奔喪回家。到徐州見(jiàn)著父親,看見(jiàn)滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。父親說(shuō)：“事已如此，不必難過(guò)，好在天無(wú)絕人之路！” 回家變賣(mài)典質(zhì)，父親還了虧空；又借錢(qián)辦了喪事。這些日子，家中光景很是慘淡，一半為了喪事，一半為了父親賦閑。喪事完畢，父親要到南京謀事，我也要回北京念書(shū)，我們便同行。 到南京時(shí)，有朋友約去游逛，勾留了一日；第二日上午便須渡江到浦口，下午上車(chē)北去。父親因?yàn)槭旅Γ疽颜f(shuō)定不送我，叫旅館里一個(gè)熟識(shí)的茶房陪我同去。他再三囑咐茶房，甚是仔細(xì)。但他終于不放心，怕茶房不妥帖；頗躊躇了一會(huì)。其實(shí)我那年已二十歲，北京已來(lái)往過(guò)兩三次，是沒(méi)有什么要緊的了。他躊躇了一會(huì)，終于決定還是自己送我去。我再三回勸他不必去；他只說(shuō)：“不要緊，他們?nèi)ゲ缓茫 ? 我們過(guò)了江，進(jìn)了車(chē)站。我買(mǎi)票，他忙著照看行李。行李太多了，得向腳夫行些小費(fèi)才可過(guò)去。他便又忙著和他們講價(jià)錢(qián)。我那時(shí)真是聰明過(guò)分，總覺(jué)他說(shuō)話不大漂亮，非自己插嘴不可，但他終于講定了價(jià)錢(qián)；就送我上車(chē)。他給我揀定了靠車(chē)門(mén)的一張椅子；我將他給我做的紫毛大衣鋪好座位。他囑咐我路上小心，夜里要警醒些，不要受涼。又囑托茶房好好照應(yīng)我。我心里暗笑他的迂；他們只認(rèn)得錢(qián)，托他們只是白托！而且我這樣大年紀(jì)的人，難道還不能料理自己么？ 我說(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)了。 近幾年來(lái)，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨(dú)力支持，做了許多大事。哪知老境卻如此頹唐！他觸目傷懷，自然情不能自已。情郁于中，自然要發(fā)之于外；家庭瑣屑便往往觸他之怒。他待我漸漸不同往日。但最近兩年不見(jiàn)，他終于忘卻我的不好，只是惦記著我，惦記著我的兒子。 我北來(lái)后，他寫(xiě)了一信給我，信中說(shuō)道：“我身體平安，惟膀子疼痛厲害，舉箸提筆，諸多不便，大約大去之期不遠(yuǎn)矣。”我讀到此處，在晶瑩的淚光中，又看見(jiàn)那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知何時(shí)再能與他相見(jiàn)！ </p> <div id="nav" style="color:#F00; font-size:35px"></div> </div> </div> <div id="nav2" ></div></body></html>以上這篇Js判斷H5上下滑動(dòng)方向及滑動(dòng)到頂部和底部判斷的示例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
