js判断鼠标进入容器的方向

最新推荐文章于 2020-05-23 23:58:18 发布

理个以哈呦

最新推荐文章于 2020-05-23 23:58:18 发布

阅读量314

点赞数

分类专栏： js jQuery 文章标签：鼠标 javascript

js 同时被 2 个专栏收录

79 篇文章 0 订阅

订阅专栏

jQuery

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #wrap{
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -200px 0 0 -200px;
            width: 400px;
            height: 400px;
            text-align: center;
            line-height: 400px;
            border: 1px solid red;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <span id="result"></span>
    </div>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $("#wrap").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;
            var eventType = e.type;
            var dirName = new Array('上方','右侧','下方','左侧');
            if(e.type == 'mouseenter'){
                $("#result").html(dirName[direction]+'进入');
            }else{
                $('#result').html(dirName[direction]+'离开');
            }
        });
    </script>
</body>
</html>

本文转自：http://sentsin.com/web/112.html

理个以哈呦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js判断鼠标进入容器的方向

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #wrap{ position: absolute; top: 50%; left: 50%;
复制链接

扫一扫