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实现计算两个日期的间隔天数
Aug 14 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 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
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
Javascript注入技巧
2007/06/22 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python求最大值最小值方法总结
2019/06/25 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
学校班班通实施方案
2014/06/11 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
辩护词范文大全
2015/05/21 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书