求鼠标移入元素时候知道鼠标从哪个方向移入的.

比如一个div元素,当鼠标mouseover事件触发时,我想知道从上左下右哪个方向移入进去的.

解决方案 »

  1.   

    大致的思路是计算进入body的坐标，减去进入div的坐标，根据x,y坐标的正负判断方向。
    代码粘到下面了：（jquery写的）<style type="text/css"> 
    body
    {
     border:1px solid red ;
     height:500px;
    }.div1
    {
      border:1px solid blue ;
      width:100px;
      height:100px;}
    .div1
    {
      border:1px solid blue ;
      width:100px;
      height:100px;}</style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">$(document).ready(function(){function isMouseLeaveOrEnter(e, handler) {   
        if (e.type != 'mouseout' && e.type != 'mouseover') return false;   
        var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;   
        while (reltg && reltg != handler)   
            reltg = reltg.parentNode;   
        return (reltg != handler);   
    }  
     var firstX ="" ;
     var firstY ="" ;
     var secondX = "" ;
     var secondeY = "" ;
     var bodyFlag = 0;
     var divFlag = 0 ;
    $("body").mousemove(function(e){
      
        if(bodyFlag==0)
    {
      firstX = e.pageX;
      firstY = e.pageY;
      
    }
        bodyFlag++ ;
    });$("#div1").mouseover(function(e){
      if(isMouseLeaveOrEnter(event,this) )
     {  
    secondX = e.pageX ;
        secondY = e.pageY ;
    var x= firstX-secondX ;
    var y = firstY-secondY ;
    var xtext = "" ;
    var ytext = "" ;
       if(x>0)
       {
         xtext ="右" ;
       }
       else
       if(x<0)
       {
          xtext ="左" ;
       }
       else
       {
         xtext ="" ;
       }   if(y>0)
       {
         ytext ="下" ;
       }
       else
       if(y<0)
       {
          ytext ="上" ;
       }
       else
       {
         ytext ="" ;
       }
       $("#div2").html(xtext+ytext); 
    }
    }).mouseout(function(){
      bodyFlag = 0;
    });
     
     });</script><title>无标题文档</title>
    </head>
    <body>
    <h1>Hello World!</h1>
    <div id="div1" class="div1">test</div>
    <div id="div2" class="div2"></div>
    </body>
    </html>