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判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
python中pygame模块用法实例
2014/10/09 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
质检员岗位职责
2015/02/03 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
解决numpy和torch数据类型转化的问题
2021/05/23 Python
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript