一：Client系列
1.说明
clientWidth：不包括边框的可视区的宽
clientHeight：可视区的高，不包括边框
clientLeft：左边框的宽度
clientTop：上面框的宽度
2.示例-图片跟着鼠标飞
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 img { 8 position: absolute; 9 } 10 </style> 11 </head> 12 <body> 13 <img src="image/tianshi.gif" alt="" id="img"> 14 <script> 15 //文档的鼠标移动事件 16 document.onmousemove=function (e) { 17 e=window.event||e; 18 document.getElementById("img").style.left=e.clientX+"px"; 19 document.getElementById("img").style.top=e.clientY+"px"; 20 } 21 </script> 22 </body> 23 </html>
但是存在一个问题，如果将heigh加大的时候，滑动鼠标，图片会上移，离开鼠标
问题：
clientY：可视区域的纵坐标
解决：
pageY: 相对于页面顶部的坐标
但是，这种在谷歌与火狐中可以使用，但是在IE8中不能使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body { 8 height: 2000px; 9 } 10 img { 11 position: absolute; 12 } 13 </style> 14 </head> 15 <body> 16 <img src="image/tianshi.gif" alt="" id="img"> 17 <script> 18 //文档的鼠标移动事件 19 document.onmousemove=function (e) { 20 e=window.event||e; 21 document.getElementById("img").style.left=e.pageX+"px"; 22 document.getElementById("img").style.top=e.pageY+"px"; 23 } 24 </script> 25 </body> 26 </html>
继续解决：
原文：https://www.cnblogs.com/juncaoit/p/11330986.html