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 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
Sep 15 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 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
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
理解JS绑定事件
2016/01/19 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python中单例模式总结
2018/02/20 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
运输企业安全生产责任书
2014/07/28 职场文书
画展邀请函
2015/01/31 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
APP界面设计技巧和注意事项
2022/04/29 杂记