知识点
获取鼠标移动事件：document.onmousemove
鼠标的坐标为e.clientX,e.clientY ，事件对象 e 保存着事件的具体信息
对象高度与宽度的获取方法：
对象宽度：对象.offsetWidth
对象高度：对象.offsetHeight
实时获取鼠标的位置的效果如下
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
position: absolute;
left: 0;
top:0;
width: 40px;
height: 40px;
border: 2px solid #ccc; /*//Width :44px*/
}
</style>
</head>
<body>
<img src="images/xts.jpg" alt="">
<script>
/*js 获取一个元素的盒模型宽度 = width +border*2 +padding*2
对象.offsetWidth
* 高度 对象.offsetHeight
* */
var img = document.getElementsByTagName('img')[0]
document.onmousemove = function (e) {
//获取鼠标坐标 事件对象 e 保存着事件的具体信息
img.style.left = e.clientX -img.offsetWidth/2+'px' ;
img.style.top = e.clientY -img.offsetHeight/2+'px';
console.log(e.clientX,e.clientY)
}
</script>
</body>
</html>