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 showModalDialog,open取得父窗口的方法
Mar 10 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
javascript 函数调用规则
2009/08/26 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
python使用append合并两个数组的方法
2015/04/28 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python正则表达式如何匹配中文
2020/05/27 Python
python 模块导入问题汇总
2021/02/01 Python
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
问卷调查计划书
2014/01/10 职场文书
社区活动邀请函范文
2014/01/29 职场文书
小学毕业感言500字
2014/02/28 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
旅行社计调工作总结
2015/08/12 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python