JS鼠标不同方向进入图片产生不同效果

最近要做一个鼠标进入之后不同的效果代码，在网上找了一个不错的效果，给大家分享一下

css:

    html,body {
        height:100%;
        overflow:hidden;
    }
    #wrap {
        width:1200px;
        height:100%;
        margin:0px auto;
    }
    #wrap ul li {
        position:relative;
        float:left;
        width:230px;
        height:360px;
        list-style:none;
        margin-right:10px;
        overflow:hidden;
        margin-top:10px;
    }
    #wrap ul li img {
        display:block;
    }
    #wrap ul li .cover {
        position:absolute;
        width:230px;
        height:360px;
        top:0px;
        left:230px;
        background: rgba(255, 192, 203, 0.36);
    }

HTML：

<div id="wrap">
    <ul>
        <li>
            <img width="230" height="360" src="http://www.jq22.com/img/cs/500x500.png">
            <div class="cover"></div>
        </li>
    </ul>
</div>

JS:

(function() {
        var $li = $('#wrap ul li');
        $li.hover(function(e) {
                move.call(this, e, true);
            },
            function(e) {
                move.call(this, e, false);
            });

        function move(e, bool) {
            var top = $(this).offset().top;
            var bottom = top + $(this).height();
            var left = $(this).offset().left;
            var right = left + $(this).width();

            var x = e.pageX,
                y = e.pageY;

            var sT = Math.abs(y - top),
                sB = Math.abs(y - bottom),
                sL = Math.abs(x - left),
                sR = Math.abs(x - right);

            var a = Math.min(sT, sB, sL, sR);

            switch (a) {
                case sT:
                    if (bool) {
                        $(this).find('.cover').css({
                            left:
                                0,
                            top: '-360px'
                        }).stop().animate({
                                top: 0
                            },
                            200);
                    } else {
                        $(this).find('.cover').stop().animate({
                                top: '-360px'
                            },
                            200);
                    }

                    break;

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

                case sL:

                    if (bool) {
                        $(this).find('.cover').css({
                            top:
                                0,
                            left: '-230px'
                        }).stop().animate({
                                left: 0
                            },
                            200);
                    } else {
                        $(this).find('.cover').stop().animate({
                                left: '-230px'
                            },
                            200);
                    }

                    break;

                case sR:
                    if (bool) {
                        $(this).find('.cover').css({
                            top:
                                0,
                            left: '230px'
                        }).stop().animate({
                                left: 0
                            },
                            200);
                    } else {
                        $(this).find('.cover').stop().animate({
                                left: '230px'
                            },
                            200);
                    }
                    break;
            }

            //console.log( '距离顶部:'+sT+'   距离底部:'+sB+'   距离左边:'+sL+'   距离右边:'+sR )
        };

    })();