首页 > 其他 > 详细

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

时间:2014-10-21 13:35:11      阅读:218      评论:0      收藏:0      [点我收藏+]

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!