zoukankan      html  css  js  c++  java
  • 判断鼠标进入一个元素的方向(上下左右)

    <style>
      html,body{margin:0;padding:0;}
      #wrap{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>

  • 相关阅读:
    Java-对象数组排序
    aoj 0118 Property Distribution
    poj 3009 Curling 2.0
    poj 1979 Red and Black
    AtCoder Regular Contest E
    AtCoder Beginner Contest 102
    AtCoder Beginner Contest 104
    SoundHound Inc. Programming Contest 2018
    poj 3233 Matrix Power Series
    poj 3734 Blocks
  • 原文地址:https://www.cnblogs.com/cdwp8/p/4040020.html
Copyright © 2011-2022 走看看