Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码


Posted in Javascript onNovember 15, 2017

向上滑动隐藏底部悬浮框,向下滑动显示悬浮框。使用pc端浏览器查看请把浏览器设置为手机浏览器模式。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>手机端触屏手指滑动方向</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);
    },
    //拖动滑动时
    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);      
    },
    
    //通过一个dom对象进行初始化
    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();
    }
  }
}

//页面加载完成
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>我与父亲不相见已二年余了,我最不能忘记的是他的背影。 
    那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子。我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说:“事已如此,不必难过,好在天无绝人之路!”  
    回家变卖典质,父亲还了亏空;又借钱办了丧事。这些日子,家中光景很是惨淡,一半为了丧事,一半为了父亲赋闲。丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行。 
    到南京时,有朋友约去游逛,勾留了一日;第二日上午便须渡江到浦口,下午上车北去。父亲因为事忙,本已说定不送我,叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房,甚是仔细。但他终于不放心,怕茶房不妥帖;颇踌躇了一会。其实我那年已二十岁,北京已来往过两三次,是没有什么要紧的了。他踌躇了一会,终于决定还是自己送我去。我再三回劝他不必去;他只说:“不要紧,他们去不好!” 
    我们过了江,进了车站。我买票,他忙着照看行李。行李太多了,得向脚夫行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分,总觉他说话不大漂亮,非自己插嘴不可,但他终于讲定了价钱;就送我上车。他给我拣定了靠车门的一张椅子;我将他给我做的紫毛大衣铺好座位。他嘱咐我路上小心,夜里要警醒些,不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂;他们只认得钱,托他们只是白托!而且我这样大年纪的人,难道还不能料理自己么?  
    我说道:“爸爸,你走吧。”他望车外看了看,说:“我买几个橘子去。你就在此地,不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是一个胖子,走过去自然要费事些。我本来要去的,他不肯,只好让他去。我看见他戴着黑布小帽,穿着黑布大马褂,深青布棉袍,蹒跚地走到铁道边,慢慢探身下去,尚不大难。可是他穿过铁道,要爬上那边月台,就不容易了。他用两手攀着上面,两脚再向上缩;他肥胖的身子向左微倾,显出努力的样子。这时我看见他的背影,我的泪很快地流下来了。我赶紧拭干了泪。怕他看见,也怕别人看见。我再向外看时,他已抱了朱红的橘子往回走了。过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走。到这边时,我赶紧去搀他。他和我走到车上,将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土,心里很轻松似的。过一会儿说:“我走了,到那边来信!”我望着他走出去。他走了几步,回过头看见我,说:“进去吧,里边没人。”等他的背影混入来来往往的人里,再找不着了,我便进来坐下,我的眼泪又来了。 
    近几年来,父亲和我都是东奔西走,家中光景是一日不如一日。他少年出外谋生,独力支持,做了许多大事。哪知老境却如此颓唐!他触目伤怀,自然情不能自已。情郁于中,自然要发之于外;家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年不见,他终于忘却我的不好,只是惦记着我,惦记着我的儿子。 
    我北来后,他写了一信给我,信中说道:“我身体平安,惟膀子疼痛厉害,举箸提笔,诸多不便,大约大去之期不远矣。”我读到此处,在晶莹的泪光中,又看见那肥胖的、青布棉袍黑布马褂的背影。唉!我不知何时再能与他相见! </p> 
<div id="nav" style="color:#F00; font-size:35px"></div>
    </div> 
  </div> 
<div id="nav2" ></div>
</body>
</html>

以上这篇Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
Vue中使用sass实现换肤功能
Sep 07 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
基于vue实现简易打地鼠游戏
Aug 21 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 #Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 #Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 #Javascript
判断div滑动到底部的scroll实例代码
Nov 15 #Javascript
Vue.js实现列表清单的操作方法
Nov 15 #Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 #Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 #Javascript
You might like
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
理解javascript模块化
2016/03/28 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Python从零开始创建区块链
2018/03/06 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
python eventlet绿化和patch原理
2020/11/21 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
网络书店创业计划书
2014/02/07 职场文书
大四毕业生自荐书
2014/07/05 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS