js判断鼠标移入移出方向的方法

PC端鼠标移入移出的效果很好，这里就给出判断鼠标移入移出的方法，有空再发出带效果的文章，不过授之以鱼不如受之以渔，有了个这个方法，效果不还是so easy吗？

代码：

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title></title>
 <style type="text/css">
 * {
 padding: 0;
 margin: 0;
 }

 .ul-box {
 width: 345px;
 margin: 20px auto;
 background-color: #f5f5f5;
 overflow: auto;
 }

 .li-item {
 width: 100%;
 height: 134px;
 margin-bottom: 10px;
 border-radius: 4px;
 }

 .li-item1 {
 background: linear-gradient(90deg, #7f90e3 0%, #8b9bff 100%);
 }
 </style>
 </head>
 <body>
 <ul id="ulBox" class="ul-box">
 <li class="li-item li-item1" onmouseleave="derEvent(event, 'leave')" onmouseenter="derEvent(event, 'enter')"></li>
 </ul>
 </body>
 <script type="text/javascript">
 /**
 * @param {Object} event 当前事件源信息
 * @return {Number} d 方向 top 0 right 1 bottom 2 left 3
 */
 function getDer(event) {
 let ele = event.target
 var d;
 var w = ele.offsetWidth,
 h = ele.offsetHeight,
 l = ele.offsetLeft,
 t = ele.offsetTop,
 x = (event.clientX - l - w / 2) * (w > h ? (h / w) : 1),
 y = (event.clientY - t - h / 2) * (h > w ? (w / h) : 1);
 d = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4;
 return d;
 // top 0 right 1 bottom 2 left 3
 }
 /**
 * @param {Object} event 事件源信息
 * @param {Object} type 类型 leave 离开 色 enter 进入
 */
 function derEvent(event, type) {
 let d = getDer(event)
 let txt = ''
 switch (d) {
 case 0:
  txt = '上'
  break;
 case 1:
  txt = '右'
  break;
 case 2:
  txt = '下'
  break;
 case 3:
  txt = '左'
  break;
 default:
  break;
 }
 if (type === 'leave') {
 console.log(txt, '离开')
 } else {
 console.log(txt, '进入')
 }
 }
 </script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现类似拉勾网的鼠标移入移出效果

    JavaScript实现类似拉勾网的鼠标移入移出效果

    先上效果图(gif自己录制的,有点难看抱歉,工具licecap) 实现思路  HTML结构 <ul> <li> <div class="bg"> <p>JS</p> </div> </li> ..... </ul> li作为鼠标移入(mouseenter)和鼠标移出(mouseleave)的载体. div作为动画执行的载体. CSS div采用absolute定位,通过top.left改变它

  • javascript表格隔行变色加鼠标移入移出及点击效果的方法

    本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法.分享给大家供大家参考.具体分析如下: 表格隔行变色,也是一个提高用户体验的js效果. 效果实现: 表格奇偶行的颜色不一样.这样可以防止用户看数据时串行. 鼠标移入某行时变颜色,移出再变回来.这样可以让用户清楚的知道自己正在看哪一行. 表格点击变色.便于用户选中自己想保留的项.   说明: i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果 tables_li[i].onoff = 1;  为了实现

  • js判断鼠标移入移出方向的方法

    PC端鼠标移入移出的效果很好,这里就给出判断鼠标移入移出的方法,有空再发出带效果的文章,不过授之以鱼不如受之以渔,有了个这个方法,效果不还是so easy吗? 代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

  • js实现鼠标移入移出卡片切换内容

    js实现鼠标移入移出卡片切换内容

    本文实例为大家分享了js实现鼠标移入移出卡片切换内容的具体代码,供大家参考,具体内容如下 案例动态效果图: html代码: <div class="sports-purple"> <div class="all"> <!-- 内容 --> <div class="content"> <div class="first-block"> <!-- 内容的侧边栏 --

  • JS判断鼠标从什么方向进入一个容器实例说明

    JS判断鼠标从什么方向进入一个容器实例说明

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方法,是基于jquery的,说实话,其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白,原文中有一些英文注释我就不一一说明了.代码部分不是

  • 利用JS判断鼠标移入元素的方向

    利用JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect

  • JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    一.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢? 首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种比较方便的方法: 第一种方法,利用圆和反正切三角函数 如下图所示: 以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限. 代码如下: $(".box").on(&quo

  • js判断鼠标位置是否在某个div中的方法

    本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在

  • 鼠标移入移出事件改变图片的分辨率的两种方法

    最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下 首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同 方法一 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

  • JS简单判断滚动条的滚动方向实现方法

    本文实例讲述了JS简单判断滚动条的滚动方向实现方法.分享给大家供大家参考,具体如下: 以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ var oScrollTop=$(window).scrollTop(); if ( oScrollTop > 80) { //write your code } if ( oScrollTop < 80) {

  • js判断鼠标左、中、右键哪个被点击的方法

    本文实例讲述了js判断鼠标左.中.右键哪个被点击的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js判断鼠标左.中.右键哪个被点击-柯乐义</title> <script type="text/javascript"> function whichButton(event) { var btnNum = event.button; if (btnNum==2)

随机推荐