利用JS判断鼠标从什么方向移入容器

linux web前端开发环境|现代前端开发流程图|手机网站前端开发

代码片段 1

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>web前端开发百度资源:js判断鼠标进入方向</title>
</head>
<body>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 300px;
            height: 300px;
            background: #33aa00;
            margin: 50px;
            display: inline-block;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
        }
    </style>
    <div id=”wrap”>
        方向反馈
    </div>
    <script type=”text/javascript” src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.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’) {
                    $(this).html(dirName[direction] + ‘进入’);
                } else {
                    $(this).html(dirName[direction] + ‘离开’);
                }
            });
    </script>
</body>
</html>

cocos2dx前端开发环境搭建|前端搭建开发环境搭建|2018前端后端开发薪水

» 本文来自:前端开发者 » 《利用JS判断鼠标从什么方向移入容器》
» 本文链接地址:https://www.rokub.com/4543.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!