鏍规嵁榧犳爣绉诲叆绉诲嚭鏂瑰悜锛屽疄鐜癶over鏁堟灉

Posted 2021-01-26

鏍囩锛?a href='http://www.mamicode.com/so/1/.sh' title='.sh'>.sh   pre   outer   otto   璺濈   irb   enter   鏍规嵁   out   

棣栧厛锛屾垜浠鍒ゆ柇榧犳爣绉诲叆瀵硅薄鐨勬柟鍚戯細
鍏堣幏鍙栬瀵硅薄鐨勫乏杈硅窛锛岀劧鍚庨€氳繃鍒ゆ柇榧犳爣璺濈涓婇潰銆佸乏闈€佸彸闈€佷笅闈㈢殑鍊肩殑鏈€灏忓€硷紝鏉ヨ幏鍙栭紶鏍囩Щ鍏ュ璞＄殑鏂瑰悜銆?/p>

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浠ｇ爜锛?/p>

$(".outer").each(function(){
            $(this).dirMove();
})