js判断鼠标移入的方向并触发事件

最新推荐文章于 2025-06-16 23:59:03 发布

原创最新推荐文章于 2025-06-16 23:59:03 发布 · 置顶 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

这段代码展示了如何使用JavaScript和jQuery检测鼠标进入一个div元素时的方向（上、右、下、左），并通过动画效果展示不同的进入方向。当鼠标进入元素时，对应的提示文字会从相应方向滑入；离开时则反向滑出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>判断鼠标进入方向</title>
    <style>
        html,body{
            margin:0;
            padding:0;
        }
        .wrap{
            width:300px;
            height:300px;
            position: relative;
            margin:50px;
            overflow: hidden;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            background: black;
            opacity: .5;
            color: white;
            font-size: 30px;
            line-height: 300px;
            text-align: center;
        }
        .img{
            width: 100%;
            height: 100%;
            background:#33aa00;
            display:inline-block;
            font-size:50px;
            text-align:center;
            line-height:300px;
        }
    </style>
</head>
<body>

<div class="wrap">
    <div class="img">
    </div>
    <div class="mask">
        You are very beautiful!
    </div>
</div>
<script  src="js/jquery-3.2.0.min.js"></script>
<script>
    $(".wrap").bind("mouseenter mouseleave",
        function(e) {
            var mask = $(this).find('.mask');
            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;

            var eventType = e.type;
            var dirName = new Array('上方','右侧','下方','左侧');
            if(e.type == 'mouseenter'){
                mouseIN(direction,mask);
            }else{
                mouseOut(direction,mask);
            }
        });
        function mouseIN(direction,ele) {
            switch (direction){
                //上方
                case 0:
                    ele.css({
                        top:"-100%",
                        left:0
                    }).animate({
                        top:0

                    },500);
                    break;
                //右
                case 1:
                    ele.css({
                        top:0,
                        left:'100%'
                    }).animate({
                        left:0

                    },500);
                    break;
                //下
                case 2:
                    ele.css({
                        top:"100%",
                        left:0
                    }).animate({
                        top:0

                    },500);
                    break;
                //左
                case 3:
                    ele.css({
                        top:0,
                        left:'-100%'
                    }).animate({
                        left:0

                    },500);
                    break;
            }
        };
        function mouseOut(direction,ele) {
            switch (direction){
                case 0:
                    ele.animate({
                        top:'-100%'
                    })
                    break;
                case 1:
                    ele.animate({
                        left:'100%'
                    });
                    break;
                case 2:
                    ele.animate({
                        top:'100%'
                    });
                    break;
                case 3:
                    ele.animate({
                        left:'-100%'
                    })
                    break;
            }
        }
</script>
</body>
</html>