<html>
<head>
<title>鼠标位置判断</title>
<style type="text/css">
.item{
width: 100px;
height: 100px;
background-color: #f00;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="item"></div>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
function bindEvent () {
item.onmouseenter = function (e) {
get('in',getDer(this,e))
}
item.onmouseleave = function (e) {
get('out',getDer(this,e))
}
}
bindEvent ();
function get (inOut,dir) {
var dirStr = ['top','right','bottom','left'];
console.log(inOut + '-' + dirStr[dir]);
return inOut + '-' + dirStr[dir]
}
function getDer (div,event) {
var d;
var w = div.offsetWidth;
var h = div.offsetHeight;
var l = div.offsetLeft;
var t = div.offsetTop;
// x,y 改成相对于 div中心为坐标系中心的值
var x = event.clientX - (l + w / 2) * (w > h ? (h / w ) : 1);
var y = event.clientY - (t + h / 2) * (h > w ? (w / h ) : 1);
// 求出 根据 x,y求出角度
// Math.atan2(y,x) 返回 -PI 到 PI 之间的值
// 转换成 角度
// Math.atan2(y,x) * (180/Math.PI) 返回 -180 ~ 180之间的值
// t : -135 ~ -45
// r : -45 ~ 0 0 ~ 45
// l : 135 ~ 180 -180 ~-135
// b : 45 ~ 135
// 如果是我的话, 基本就止于此了, 因为根据这个充分可以判断方向了.
// 但老师却对数据进行了处理
// 让返回值 的范围为0 ~360
// Math.atan2(y,x) * (180/Math.PI) + 180
// t : -135 ~ -45 --> 45 ~ 135
// r : -45 ~ 0 0 ~ 45 --> 135 ~ 225
// l : 135 ~ 180 -180 ~-135 --> 315 ~ 360 0 ~ 45
// b : 45 ~ 135 --> 225 ~ 315
// 全部÷ 90 这里稍微不太懂, 取范围右值,进行四舍五入,
// (Math.atan2(y,x) * (180/Math.PI) + 180) / 90
// 然后进行 + 3 %4
d = (Math.round((Math.atan2(y,x) * (180/Math.PI) + 180) / 90) + 3)%4
// t : -135 ~ -45 --> 45 ~ 135 --> 1 --> 4 --> 0
// r : -45 ~ 0 0 ~ 45 --> 135 ~ 225 --> 2 --> 5 --> 1
// b : 45 ~ 135 --> 225 ~ 315 -->3 --> 6 --> 2
// l : 135 ~ 180 -180 ~-135 --> 315 ~ 360 0 ~ 45 --> 0 4 --> 3 7 --> 3
return d
}
</script>
</body>
</html>
这个数据处理确实完全是数学上的处理.
非常的漂亮.
网友评论