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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
传智播客学习之java 反射
Nov 22 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
JS判断数组那点事
Oct 10 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
js实现直播点击飘心效果
Aug 19 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
substr()函数中文版
2006/10/09 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
JavaScript基本对象
2007/01/11 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
Python对List中的元素排序的方法
2018/04/01 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python读取文本中的坐标方法
2018/10/14 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python tkinter控件布局项目实例
2019/11/04 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Python中实现输入一个整数的案例
2020/05/03 Python
python代码中怎么换行
2020/06/17 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
机电一体化职业规划书
2014/01/07 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
高三化学教学反思
2016/02/22 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS