<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#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; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
var eventType = e.type;
var dirName = new Array('上方', '右侧', '下方', '左侧');
if (e.type == 'mouseenter') {
$("#wrap").html(dirName[direction] + '进入');
} else {
$('#wrap').html(dirName[direction] + '离开');
}
});
});
</script>
</head>
<body>
<div id="wrap" style="width: 200px; height: 200px; border: solid 1px #000; margin-top: 100px;
margin-left: 400px;">
</div>
</body>
</html>
