jquery判断鼠标移动方向--版本2

之前网上收集过一个判断鼠标移动方向的demo，但是实现过程相对比较复杂，涉及到一些函数计算。

链接地址：http://blog.csdn.net/jian_xi/article/details/53427435

下面这个版本的代码毕竟容易看懂，先上效果图：

html代码：

<div class="box">
      <ul>
        <li>
          <img src="img/1.jpg">
          <div class="cover">
            <p class="info">fasdfhggadsg</p>
          </div>
        </li>
        <li>
          <img src="img/2.jpg">
          <div class="cover">
            <p class="info">fasdfhggadsg</p>
          </div>
        </li>
        <li>
          <img src="img/3.jpg">
          <div class="cover">
            <p class="info">fasdfhggadsg</p>
          </div>
        </li>
        <li>
          <img src="img/4.jpg">
          <div class="cover">
            <p class="info">fasdfhggadsg</p>
          </div>
        </li>
        <li>
          <img src="img/5.jpg">
          <div class="cover">
            <p class="info">fasdfhggadsg</p>
          </div>
        </li>
      </ul>
    </div>

css代码：

*{
        margin: 0;
        padding: 0;
      }
      .box{
        width: 1200px;
        height: 360px;
        margin: 100px auto;
      }
      .box ul li{
        list-style: none;
        width: 230px;
        height: 360px;
        float: left;
        margin-right: 10px;
        position: relative;
        overflow: hidden;
      }
      .box ul li img{
        display: block;
      }
      .box ul li .cover{
        width: 230px;
        height: 360px;
        background: url(img/new-bg.png);
        position: absolute;
        left: 230px;
        top:0;
      }
      .box ul li .cover p{
        font-size: 14px;
        font-family: "微软雅黑";
        text-align: center;
        color: #fff;
        margin-top: 120px;
      }

js:

(function(){
          var $li = $(".box ul li");

          $li.hover(function(e){
            move.call(this,e,true);
          },function(e){
            move.call(this,e,false);
          });

          function move(e,bool){
            var liTop = $(this).offset().top;
            var liLeft = $(this).offset().left;
            var liBottom = liTop + $(this).height();
            var liRight = liLeft + $(this).width();

            //获取鼠标的坐标
            var ev = e || window.event;
            var pagex = ev.pageX;
            var pagey = ev.pageY;

            //获取鼠标距离四条边的距离
            var jtop = Math.abs(pagey - liTop);
            var jbottom = Math.abs(pagey - liBottom);
            var jleft = Math.abs(pagex - liLeft);
            var jright = Math.abs(pagex - liRight);
            console.log(jleft+"--"+jtop)
            //获取四个值中的最小值，判断进入的方向
            var min = Math.min(jtop,jbottom,jleft,jright);

            switch(min){
              case jtop:
                if(bool){
                  $(this).find(".cover").css({
                    top:"-360px",
                    left:0
                  }).stop().animate({
                    top:"0"
                  });
                }else{
                  $(this).find(".cover").stop().animate({
                    top:"-360px"
                  });
                }
                break;

              case jleft:
                  if(bool){
                  $(this).find(".cover").css({
                    left:"-360px",
                    top:0
                  }).stop().animate({
                    left:"0"
                  });
                }else{
                  $(this).find(".cover").stop().animate({
                    left:"-360px"
                  });
                }
                break;

              case jbottom:
                  if(bool){
                  $(this).find(".cover").css({
                    top:"360px",
                    left:0
                  }).stop().animate({
                    top:"0"
                  });
                }else{
                  $(this).find(".cover").stop().animate({
                    top:"360px"
                  });
                }
                break;    

              case jright:
                  if(bool){
                  $(this).find(".cover").css({
                    left:"360px",
                    top:0
                  }).stop().animate({
                    left:"0"
                  });
                }else{
                  $(this).find(".cover").stop().animate({
                    left:"360px"
                  });
                }
                break;  
            }
          }

        })();

以上为该效果的全部实现过程！