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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
Vue中使用vux的配置详解
May 05 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php生成略缩图代码
2012/07/16 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Python中获取对象信息的方法
2015/04/27 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python实现对输入的密文加密
2019/03/20 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python中sys模块是做什么用的
2020/08/16 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
锦旗标语大全
2014/06/23 职场文书
总经理致辞
2015/07/29 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书