JS监测鼠标指针位置

需求1：鼠标移入正方形的时候，蓝色小圆点跟随鼠标滚动(不许蓝色小圆点超出正方形区域)，
正方形里实时显示当前鼠标相对于body的坐标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="app/src/js/demo.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #box {
            width: 200px;
            height: 200px;
            border:1px solid #333;
            position: relative;
        }
        #dot {
            position: absolute;
            left:0;
            right:0;
            width: 10px;
            height: 10px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: deepskyblue;
            display: inline-block;
        }
    </style>
</head>
<body>

<div id="box">
    <span id="point">
        (0, 0)
    </span>
    <span id="dot"></span>
</div>


</body>
</html>

 

// 当需求为获得的坐标值相对于body时

function positionBody(event) {
    var x, y;
    var e = event || window.event;
    x = e.clientX;
    y = e.clientY;
    return {
        x: x,
        y: y
    }
}

function executeMove(event, box, point, dot) {
    var x = positionBody(event).x;
    var y = positionBody(event).y;
    // 获取盒子不计算边框的宽高
    var boxWidth = box.clientWidth;
    var boxHeight = box.clientHeight;
    var dotWidth = dot.offsetWidth;
    var dotHeight = dot.offsetHeight;

    // 边界距离
    var borderLeft = boxWidth - dotWidth;
    var borderTop = boxHeight - dotHeight;

    if(x >= borderLeft) {
        dot.style.left = borderLeft + 'px';
    } else if (y >= borderTop) {
        dot.style.top = borderTop + 'px';
    } else {
        dot.style.left = x + 'px';
        dot.style.top = y + 'px';
    }

    point.innerHTML = '(' + x + ', ' + y + ')';
}

window.onload = function () {
    var box = document.getElementById('box');
    var point = document.getElementById('point');
    var dot = document.getElementById('dot');

    if(box.attachEvent) {
        box.attachEvent('mousemove', function (event) {
            executeMove(event, box, point, dot);
        });
    } else {
        box.addEventListener('mousemove', function (event) {
            executeMove(event, box, point, dot);
        }, false);
    }
};

 

js bin 地址：http://jsbin.com/suvizojube/edit?html,js,output 

 

 

需求2：鼠标移入正方形的时候，蓝色小圆点跟随鼠标滚动(不许蓝色小圆点超出正方形区域)，
正方形里实时显示当前鼠标相对于正方形的坐标（要求正方形在页面里垂直居中）。

元素垂直居中的三种实现方式：
http://www.cnblogs.com/lqcdsns/p/6378536.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="app/src/js/demo.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,
        body {
            height: 100%;
        }
        #box {
            width: 200px;
            height: 200px;
            border:1px solid #333;
            /*脱离文档流*/
            position: relative;
            left: 0;
            right:0;
            /*偏移*/
            top: 50%;
            bottom:0;
            /*margin: -100px auto 0 auto;*/
            /*-50%代表上移盒子高度的一半*/
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            margin: 0 auto;
        }
        #dot {
            position: absolute;
            left:0;
            right:0;
            width: 10px;
            height: 10px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: deepskyblue;
            display: inline-block;
        }
    </style>
</head>
<body>

<div id="box">
    <span id="point">
        (0, 0)
    </span>
    <span id="dot"></span>
</div>


</body>
</html>
// 当需求为获得的坐标值相对于box时

function positionBox(event, box) {
    var x, y;
    var e = event || window.event;
    var boxWidth = box.clientWidth;
    var boxHeight = box.clientHeight;
    x = e.clientX - box.offsetLeft;
    y = e.clientY - (box.offsetTop - box.offsetHeight/2);
    return {
        x: x,
        y: y
    }
}

function executeMove(event, box, point, dot) {
    var x = positionBox(event, box).x;
    var y = positionBox(event, box).y;
    // 获取盒子不计算边框的宽高
    var boxWidth = box.clientWidth;
    var boxHeight = box.clientHeight;
    var dotWidth = dot.offsetWidth;
    var dotHeight = dot.offsetHeight;

    // 边界距离
    var borderLeft = boxWidth - dotWidth;
    var borderTop = boxHeight - dotHeight;

    if(x >= borderLeft) {
        dot.style.left = borderLeft + 'px';
    } else if (y >= borderTop) {
        dot.style.top = borderTop + 'px';
    } else {
        dot.style.left = x + 'px';
        dot.style.top = y + 'px';
    }

    point.innerHTML = '(' + x + ', ' + y + ')';
}

window.onload = function () {
    var box = document.getElementById('box');
    var point = document.getElementById('point');
    var dot = document.getElementById('dot');

    if(box.attachEvent) {
        box.attachEvent('mousemove', function (event) {
            executeMove(event, box, point, dot);
        });
    } else {
        box.addEventListener('mousemove', function (event) {
            executeMove(event, box, point, dot);
        }, false);
    }
};

 js bin: http://jsbin.com/suvizojube/edit?html,js,output

 

posted on 2017-02-08 14:18  Asina  阅读(4594)  评论(0)  编辑  收藏  举报