JS監測鼠標指針位置

本文轉載自查看原文 2017-02-08 14:18 2680 JavaScript

需求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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 原生JS實現隨着鼠標滾動到元素位置觸發對應css3動畫，簡單易用滾動監測 js獲取鼠標位置 js 獲取鼠標位置 js獲取鼠標位置 js獲取鼠標當前的位置 js取鼠標坐標位置 js 獲取鼠標位置和獲取元素位置 JS-鼠標光標指針懸停事件 js控制鼠標光標的位置 js獲取當前鼠標位置並輸出