<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0%;
padding: 0%;
}
body{
width: 2000px;
height: 3000px;
}
#box1{
border: 1px solid black;
width: 50px;
height: 50px;
background-color: red;
/* 开启box1的绝对定位 */
position: absolute;
}
</style>
<script>
window.onload = function(){
/*---------------------使div可以跟随鼠标移动-------------------*/
//获取div
var box1 = document.getElementById("box1");
//给文档绑定鼠标移动事件
//因为给div绑定事件时,当鼠标移除div的时候将不会触发事件
//而鼠标无法移出文档页面
document.onmousemove = function(event){
//解决事件对象兼容问题
event = event||window.event
//获取鼠标的坐标
/*
* div的偏移量是相对于整个页面的
* client用于获取当前可见的窗口的坐标
* 当窗口更大,出现滚动条时,鼠标将脱离div
* var left = event.clientX;
* var top = event.clientY;
*/
/*
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但是这两个属性在IE8中不支持,所以如果需要兼容IE8则不要使用
* var left = event.pageX;
* var top = event.pageY;
*/
//通过获取滚动条滚动的距离
//与可见窗口的坐标相加来解决兼容问题和鼠标脱离问题
//chrome认为浏览器的滚动条是body的,可以通过 document.body.scrollTop 来获取
//火狐等浏览器认为浏览器的滚动条是html的
//所以需要进行滚动条兼容
var st = document.body.scrollTop ||document.documentElement.scrollTop;
var sl = document.body.scrollLeft ||document.documentElement.scrollLeft;
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left+sl+"px";
box1.style.top = top+st+"px";
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>