您的位置：首页 > Web前端 > JavaScript

js判断鼠标移入移出方向

2014-12-16 21:38 1021 查看
前段时间，偶然看到百度百科里面，有一DIV反转的效果，试了一个居然可以根据鼠标移入移出的方向，进行不同的反转；所以，心里就犯嘀咕，起了疑惑，一个DIV容器如何知道鼠标移入移出方向，进而产生不同的行为：如图所示：



自己试了一下，网上网友说的用4个div紧紧包裹住容器，如下所示：



这中做法在移入，移出的速度过快时，有bug不好用；
最后在一篇博客里面找到了一个比较好的方法：代码如下
$("#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.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
var eventType = e.type;
var dirName = new Array('上方','右侧','下方','左侧');
if(e.type == 'mouseenter'){
$(this).html(dirName[direction]+'进入');
}else{
$(this).html(dirName[direction]+'离开');
}
});

充分利用几何数学实现了这个功能，真心不错；分享给大家，演示代码如下：

<!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: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.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
var eventType = e.type;
var dirName = new Array('上方','右侧','下方','左侧');
if(e.type == 'mouseenter'){
$(this).html(dirName[direction]+'进入');
}else{
$(this).html(dirName[direction]+'离开');
}
});
</script>
</body>
</html>


本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1590833
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航