判断鼠标移入元素方向

$(this).bind("mouseenter mouseleave",function(e){   
  var w = $(this).width();   
  var h = $(this).height();   
  var x = (e.pageX - $(this).offset().left - (w / 2)) * (w > h ? (h / w) : 1);   
  var y = (e.pageY - $(this).offset().top - (h / 2)) * (h > w ? (w / h) : 1);   
  var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;   
  //direction 0‘上方‘,1‘右侧‘,2‘下方‘,3‘左侧‘);
  if(e.type == ‘mouseenter‘){
  //移入
  }else{
  //移出
  }
})

  

时间: 2024-10-28 16:42:55

判断鼠标移入元素方向的相关文章

关于js判断鼠标移入元素的方向——上下左右

一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: 对于数学不太好的我,只能上网找下看有没有人解决了.找到了如下这段: var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2))

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

判断鼠标移入移出方向设置

原理:以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π /4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左.如下图所示 Js代码 var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); 计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h

判断鼠标移入移出元素时的方向

本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识,但是非常简单好理解,希望能对你有所帮助. 在线demo: http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html 相关代码: https://github.com/liuyunzhuge/blog/blob/master/mouse_

判断鼠标移入方向

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

根据鼠标移入移出方向,实现hover效果

首先,我们要判断鼠标移入对象的方向:先获取该对象的左边距,然后通过判断鼠标距离上面.左面.右面.下面的值的最小值,来获取鼠标移入对象的方向. JS代码: ;(function($){ $.fn.extend({ dirMove:function(){ var $outer=this; var $mask=this.find("#mask"); var disL = $outer.offset().left; var disT = $outer.offset().top; var dis

判断鼠标进入元素的方向

javascript版: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>判断鼠标进入和离开容器的方向</title> 6 <style> 7 #test{ 8 width:300px; 9 height:200px; 10 border:1px solid red; 11 } 12 </style&g

判断鼠标从哪个方向进入容器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标进入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50p

判断鼠标进入容器方向

<script src="jquery-3.2.1.min.js"></script> <script> $("#div").on("mouseenter mouseleave",function(e) { var w = $(this).width(); // 得到盒子宽度 var h = $(this).height();// 得到盒子高度 var x = (e.pageX - this.offsetLef