使用js创建一个可以随鼠标移动的盒子（二）

使用js创建一个可以随鼠标移动的盒子（二）

此文章是在上一篇的基础上写的 主要是为了解决 在不同浏览器的兼容问题
上一篇的链接

由于pageX和pageY不兼容IE8所以就不采用这个方法了
当滚轮不在顶端时使用clientX和clientY时鼠标和盒子移动会出现问题如图

下面会有一段空白不会到底，可以发现这个高度其实是和 滚轮到顶端的高度是一样的
因此就可以通过计算来实现这个兼容问题

<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				document.onmousemove = function(event){
					event = event || window.event;
					var left = event.clientX;//获取可见窗口的 鼠标 坐标
					var top = event.clientY;
					//火狐认为滚动条是html的 可通过documentElement.scrollTop获取
					//chrome认为滚动条是body的可通过body.scrollTop来获取 
					var st = document.documentElement.scrollTop || document.body.scrollTop;
					var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
					box.style.left = left + sl + "px";
					box.style.top = top + st + "px";
				}
			}

这个就是兼容的一个方法

具体HTML和css部分参考上一篇