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);
}
};