判断鼠标进入一个元素的方向(上下左右)

<style>
  html,body{margin:0;padding:0;}
  #wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;}
</style>
  <div id="wrap">
    方向反馈
  </div>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script>
$("#wrap").bind("mouseenter mouseleave",
function(e) {
  var w = $(this).width();
  var h = $(this).height();
  var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
  var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
  var direction = Math.floor(((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90);
  var eventType = e.type;
  var dirName = new Array(‘上方‘,‘右侧‘,‘下方‘,‘左侧‘);
  if(e.type == ‘mouseenter‘){
    $(this).html(dirName[direction]+‘进入‘);
  }else{
    $(this).html(dirName[direction]+‘离开‘);
  }
});
</script>

时间: 2024-07-30 07:30:36

判断鼠标进入一个元素的方向(上下左右)的相关文章

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

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

JS实现穿墙效果(判断鼠标划入划出的方向)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>判断鼠标移入移出方向</title> <style type="text/css"> * { margin: 0; padding: 0; } .outer { width: 400px; height: 400px; bor

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

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

鼠标从一个元素四周哪边进入 定位的子元素跟着从这边进来 离开也是一样的

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document change</title> <style type="text/css"> *{margin:0px;padding:0px} ul {list-style-type:none} ul li,ul a,ul

判断鼠标是否在指定区域代码

<div style="width:300px; height:300px; border:1px solid red;"> <div id="target"><div><span>测试</span></div></div> </div> <style type="text/css"> #target{ width: 200px; heig

css实现菜单栏效果以及用hover属性去控制另一个元素样式的问题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> *{ margin: 0; padding: 0; } .one{ text-decoration: none; color:red; font-size: 20px; /*position: r

Vue中在template标签中进行判断时注意比较元素

(一)比较的元素,一个是data元素,另外一个是常量,如下图所示: 编译正常,运行正常,效果在期望中,会显示Hello World,结果如下: (二)比较的元素,一个是data元素,另外一个是const常量,如下图所示: 编译正常,运行正常,效果在意料之外,不会显示Hello World. (三)比较的元素,两个都是data元素,如下图所示: 编译正常,运行正常,效果在期望中,会显示Hello World,结果如下: 将const常量赋值给data的一个元素,然后将它作为判断条件的一个元素,不能

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

判断鼠标进入元素的方向

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