欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Js判斷H5上下滑動(dòng)方向及滑動(dòng)到頂部和底部判斷的示例代碼

 更新時(shí)間:2017年11月15日 09:38:17   作者:左上角的天空  
下面小編就為大家分享一篇Js判斷H5上下滑動(dòng)方向及滑動(dòng)到頂部和底部判斷的示例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

向上滑動(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)滿(mǎn)院狼藉的東西,又想起祖母,不禁簌簌地流下眼淚。父親說(shuō):“事已如此,不必難過(guò),好在天無(wú)絕人之路!”  
    回家變賣(mài)典質(zhì),父親還了虧空;又借錢(qián)辦了喪事。這些日子,家中光景很是慘淡,一半為了喪事,一半為了父親賦閑。喪事完畢,父親要到南京謀事,我也要回北京念書(shū),我們便同行。 
    到南京時(shí),有朋友約去游逛,勾留了一日;第二日上午便須渡江到浦口,下午上車(chē)北去。父親因?yàn)槭旅?,本已說(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ō)話(huà)不大漂亮,非自己插嘴不可,但他終于講定了價(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)矣?!蔽易x到此處,在晶瑩的淚光中,又看見(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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Js與Jq獲取瀏覽器和對(duì)象值的方法

    Js與Jq獲取瀏覽器和對(duì)象值的方法

    這篇文章主要介紹了 Js與Jq獲取瀏覽器和對(duì)象值的方法的相關(guān)資料,需要的朋友可以參考下
    2016-03-03
  • JavaScript實(shí)現(xiàn)漢字轉(zhuǎn)換為拼音及縮寫(xiě)的方法示例

    JavaScript實(shí)現(xiàn)漢字轉(zhuǎn)換為拼音及縮寫(xiě)的方法示例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)漢字轉(zhuǎn)換為拼音及縮寫(xiě)的方法,結(jié)合實(shí)例形式分析了javascript數(shù)組遍歷、轉(zhuǎn)換實(shí)現(xiàn)漢字轉(zhuǎn)拼音相關(guān)操作技巧,需要的朋友可以參考下
    2019-03-03
  • 微信小程序中實(shí)現(xiàn)自定義Navbar方法詳解

    微信小程序中實(shí)現(xiàn)自定義Navbar方法詳解

    這篇文章主要介紹了微信小程序中實(shí)現(xiàn)自定義Navbar方法,Navbar由 StatusBar和TitleBar組成,只需要知道它們各自的高度,就可以很好地完成自定義,需要的朋友可以參考下
    2024-05-05
  • 使用 JavaScript 在沒(méi)有插件的情況下輸入文本掩碼的示例詳解

    使用 JavaScript 在沒(méi)有插件的情況下輸入文本掩碼的示例詳解

    這篇文章主要介紹了使用 JavaScript 在沒(méi)有插件的情況下輸入文本掩碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-06-06
  • JavaScript如何監(jiān)測(cè)數(shù)組的變化

    JavaScript如何監(jiān)測(cè)數(shù)組的變化

    最近在造輪子的時(shí)候遇到了這么一個(gè)問(wèn)題,那就是數(shù)組在調(diào)用內(nèi)部方法的時(shí)候怎么才可以監(jiān)聽(tīng)到數(shù)組發(fā)生了變化,這篇文章主要給大家介紹了關(guān)于JavaScript如何監(jiān)測(cè)數(shù)組變化的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • JS實(shí)現(xiàn)字符串翻轉(zhuǎn)的方法分析

    JS實(shí)現(xiàn)字符串翻轉(zhuǎn)的方法分析

    這篇文章主要介紹了JS實(shí)現(xiàn)字符串翻轉(zhuǎn)的方法,結(jié)合實(shí)例形式分析了javascript字符串使用reverse方法、字符串遍歷方法以及針對(duì)輸入字符串的遍歷、逆序輸出等方法實(shí)現(xiàn)字符串反轉(zhuǎn)相關(guān)操作技巧,需要的朋友可以參考下
    2018-08-08
  • js 去掉字符串前后空格實(shí)現(xiàn)代碼集合

    js 去掉字符串前后空格實(shí)現(xiàn)代碼集合

    這篇文章主要介紹了js 去掉字符串前后空格實(shí)現(xiàn)代碼集合,需要的朋友可以參考下
    2017-03-03
  • JS實(shí)現(xiàn)判斷對(duì)象是否為空對(duì)象的5種方法

    JS實(shí)現(xiàn)判斷對(duì)象是否為空對(duì)象的5種方法

    這篇文章主要介紹了JS實(shí)現(xiàn)判斷對(duì)象是否為空對(duì)象的5種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • javascript 組合按鍵事件監(jiān)聽(tīng)實(shí)現(xiàn)代碼

    javascript 組合按鍵事件監(jiān)聽(tīng)實(shí)現(xiàn)代碼

    這篇文章主要介紹了javascript 組合按鍵事件監(jiān)聽(tīng)實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
    2017-02-02
  • JS監(jiān)聽(tīng)變量改變的實(shí)現(xiàn)

    JS監(jiān)聽(tīng)變量改變的實(shí)現(xiàn)

    本文主要介紹了JS監(jiān)聽(tīng)變量改變的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04

最新評(píng)論