js根据鼠标方向划入遮罩层

js根据鼠标方向划入遮罩层:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    ul{
        overflow:hidden;
    }
    .game-list{
        float: left;
        width:296px;
        height:240px;
        border: 1px solid #cdcdcd;
        box-shadow: 0 10px 10px #e7e7e7;
        margin-left: 93px;
        margin-top:20px;
        position: relative;
        overflow: hidden;
    }
    .slidiv{
        position: absolute;
        height:240px;
        width:296px;
        background: rgba(9,9,9,0.5);
        position: absolute;
        left:-296px;
        top:0;
        text-align: center;
        color: #FFFFFF;
    }
    a{
        width:296px;
        height:240px;
        display: block;

    }
</style>
<body>
    <div>
       <ul>
            <li class="game-list">
                <a href="#">3131</a>
                <div class="slidiv">
                    <p>1</p>
                </div>  
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
slidiv()
function slidiv(){
    $(".game-list").bind("mouseenter mouseleave",  function(e) {
        var w = $(this).width();
        var h = $(this).height();
        //计算鼠标指针x,y位于当前元素比例的坐标位置
        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);
        //得出四个方向的值（0，1，2，3）
        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>
</html>

 

posted @ 2017-07-31 20:31  前端站  阅读(241)  评论(0)  编辑  收藏  举报