鼠标进入div div内判断鼠标来的方向和鼠标离开的方向

返回顶部
查看留言
转到底部

现在的位置: 首页 > 综合 > 正文

鼠标进入div div内判断鼠标来的方向和鼠标离开的方向

2012年07月24日 ⁄ 综合 ⁄ 共 930字 ⁄ 字号小中大 ⁄ 评论关闭

文章为转载,转载地址是http://www.niumowang.org/javascript/js-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://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.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>