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

标签：style   blog   http   io   ar   java   sp   div   on   

<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>

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

标签：style   blog   http   io   ar   java   sp   div   on   

原文地址：http://www.cnblogs.com/cdwp8/p/4040020.html