html hover判断移出,根据鼠标移入移出方向，实现hover效果

首先，我们要判断鼠标移入对象的方向：

先获取该对象的左边距，然后通过判断鼠标距离上面、左面、右面、下面的值的最小值，来获取鼠标移入对象的方向。

JS代码：

;(function($){

$.fn.extend({

dirMove:function(){

var $outer=this;

var $mask=this.find("#mask");

var disL = $outer.offset().left;

var disT = $outer.offset().top;

var disR = disL + $outer.outerWidth();

var disB = disT + $outer.outerHeight();

$outer.hover(function(e){

Confirmdir(e);

},function(e){

Confirmdir(e);

});

function Confirmdir(e){ //确定具体鼠标移入对象的方向

var dirL = Math.abs(e.pageX - disL);

var dirT = Math.abs(e.pageY - disT);

var dirR = Math.abs(e.pageX - disR);

var dirB = Math.abs(e.pageY - disB);

var dir = Math.min(dirL,dirT,dirR,dirB);//取得最小值

if(e.type=="mouseenter"){

switch(dir){

case dirL:

mouseIn("left");

break;

case dirT:

mouseIn("top");

break;

case dirR:

mouseIn("right");

break;

case dirB:

mouseIn("bottom");

break;

}

}else{

switch(dir){

case dirL:

mouseOut("left");

break;

case dirT:

mouseOut("top");

break;

case dirR:

mouseOut("right");

break;

case dirB:

mouseOut("bottom");

break;

}

}

}

function mouseIn(dir){

switch(dir){

case "left":

$mask.css({"left":-$outer.outerWidth(),"top":0}).show().stop(true,true).animate({"left":0});

break;

case "top":

$mask.css({"left":0,"top":-$outer.outerHeight}).show().stop(true,true).animate({"top":0});

break;

case "right":

$mask.css({"left":$outer.outerWidth(),"top":0}).show().stop(true,true).animate({"left":0});

break;

case "bottom":

$mask.css({"left":0,"top":$outer.outerHeight}).show().stop(true,true).animate({"top":0});

break;

}

}

function mouseOut(dir){

switch(dir){

case "left":

$mask.stop(true,true).animate({"left":-$outer.outerWidth()});

break;

case "top":

$mask.stop(true,true).animate({"top":-$outer.outerHeight()});

break;

case "right":

$mask.stop(true,true).animate({"left":$outer.outerWidth()});

break;

case "bottom":

$mask.stop(true,true).animate({"top":$outer.outerHeight()});

break;

}

}

}

})

})(jQuery);

HTML代码：

$(".outer").each(function(){

$(this).dirMove();

})