JS实现利用闭包判断Dom元素和滚动条的方向示例


Posted in Javascript onAugust 26, 2019

本文实例讲述了JS实现利用闭包判断Dom元素和滚动条的方向。分享给大家供大家参考,具体如下:

一、判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向

function scroll(fn) {
    //利用闭包判断滚动条滚动的方向
    var beforeScrollTop = document.body.scrollTop,
      fn = fn || function() {};
    window.addEventListener("scroll", function() {
      var afterScrollTop = document.body.scrollTop,
        delta = afterScrollTop - beforeScrollTop;
      if (delta === 0) return false;
      fn(delta > 0 ? "down" : "up");
      beforeScrollTop = afterScrollTop;
    }, false);
}
scroll(function(direction) { console.log(direction) });

二、判断鼠标的移动方向

function direction() {
    var lastX = null,
      lastY = null;
    window.addEventListener("mousemove", function(event) {
      var curX = event.clientX,
        curY = event.clientY,
        direction = '';
      // console.info(event);
      // console.info(event.clientX);
      // console.info(event.clientY);
      // 初始化坐标
      if (lastX == null || lastY == null) {
        lastX = curX;
        lastY = curY;
        return;
      }
      if (curX > lastX) {
        direction += 'X右,';
      } else if (curX < lastX) {
        direction += 'X左,';
      }
      if (curY > lastY) {
        direction += 'Y下';
      } else if (curY < lastY) {
        direction += 'Y上';
      }
      lastX = curX;
      lastY = curY;
      //console.info(direction);
      document.getElementById("test").innerText = direction;
    })
}

三、判断鼠标进入和出去某Dom元素的方式,这种没有利用闭包原理

var gaga = function(wrap) {
    var wrap = document.getElementById(wrap);
    var hoverDir = function(e) {
      var w = wrap.offsetWidth,
        h = wrap.offsetHeight,
        x = (e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1),
        y = (e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1),
        // 上(0) 右(1) 下(2) 左(3) 
        direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
        eventType = e.type,
        dirName = new Array('上方', '右侧', '下方', '左侧');
      if (e.type == 'mouseover' || e.type == 'mouseenter') {
        wrap.innerHTML = dirName[direction] + '进入';
      } else {
        wrap.innerHTML = dirName[direction] + '离开';
      }
    }
    if (window.addEventListener) {
      wrap.addEventListener('mouseover', hoverDir, false);
      wrap.addEventListener('mouseout', hoverDir, false);
    } else if (window.attachEvent) {
      wrap.attachEvent('onmouseenter', hoverDir);
      wrap.attachEvent('onmouseleave', hoverDir);
    }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 #Javascript
小程序实现层叠卡片滑动效果
Aug 26 #Javascript
微信小程序 数据缓存实现方法详解
Aug 26 #Javascript
使用typescript构建Vue应用的实现
Aug 26 #Javascript
微信小程序实现手势滑动卡片效果
Aug 26 #Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 #Javascript
vue柱状进度条图像的完美实现方案
Aug 26 #Javascript
You might like
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP插入排序实现代码
2013/04/04 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Django在win10下的安装并创建工程
2017/11/20 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
如何写python的配置文件
2020/06/07 Python
公务员综合考察材料
2014/02/01 职场文书
廉洁使者实施方案
2014/03/29 职场文书
活动总结报告格式
2014/05/09 职场文书
平面设计师岗位职责
2014/09/18 职场文书
法律服务所工作总结
2015/08/10 职场文书
go xorm框架的使用
2021/05/22 Golang
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python