DDR爱好者之家 Design By 杰米

本文实例讲述了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 "_blank" href="//www.jb51.net/Special/85.htm">javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。