根據鼠標移入移出方向,實現hover效果
阿新 • • 發佈:2018-12-03
query lse mouse pagex ima wid this animate type 首先,我們要判斷鼠標移入對象的方向:
先獲取該對象的左邊距,然後通過判斷鼠標距離上面、左面、右面、下面的值的最小值,來獲取鼠標移入對象的方向。
先獲取該對象的左邊距,然後通過判斷鼠標距離上面、左面、右面、下面的值的最小值,來獲取鼠標移入對象的方向。
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();
})
根據鼠標移入移出方向,實現hover效果