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


<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

你可能感兴趣的:(js,jQuery)