华丽遮罩层，鼠标哪里移入，遮罩层从哪里展开，从哪里移出，遮罩层从哪里开始移出

本文链接：https://blog.csdn.net/panhuanqin/article/details/83055442

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <style>
        *{margin:0;padding:0;list-style: none;}
        .main{width:922px;margin:0 auto;}
        .imgbox li{width:294px;height:267px;margin-left:20px;float:left;position: relative;top:200px;
            background-color:red;overflow: hidden}
        .slidiv{height:267px;width:294px;background: rgba(9,9,9,0.5);position: absolute;left:-294px;top:0;text-align: center;}
    </style>
</head>
<body>
<div class="main">
    <ul class="imgbox">
        <li style="margin-left:0;">
            <div class=slidiv></div>
        </li>
        <li>
            <div class=slidiv></div>
        </li>
    </ul>
</div>
<script>
    $(function(){
        $(".imgbox li").bind("mouseenter mouseleave",  function(e) {
            var w = $(this).width();
            var h = $(this).height();
            var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
            var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
            var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

            this_slidiv = $(this).find('.slidiv');
            if(e.type == 'mouseenter'){
                switch(direction){
                    case 0 :
                        this_slidiv.css({top:-h,left:"0px"});
                        break;
                    case 1:
                        this_slidiv.css({top:"0px",left:w});
                        break;
                    case 2:
                        this_slidiv.css({top:h,left:"0px"});
                        break;
                    case 3:
                        this_slidiv.css({top:"0px",left:-w});
                        break;
                }

                this_slidiv.stop(true,true).animate({"top":"0px","left":"0px"},"fast");

            }else if(e.type == 'mouseleave'){
                switch(direction){
                    case 0 :
                        this_slidiv.stop(true,true).animate({"top":-h},"fast");
                        break;
                    case 1:
                        this_slidiv.stop(true,true).animate({"left":w},"fast");
                        break;
                    case 2:
                        this_slidiv.stop(true,true).animate({"top":h},"fast");
                        break;
                    case 3:
                        this_slidiv.stop(true,true).animate({"left":-w},"fast");
                        break;
                }
            }
        });
    });
</script>
</body>
</html>