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