<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#box1{
width: 100px; /*宽度为100px*/
height: 100px; /*高度为100px*/
background-color:red; /*背景颜色*/
/*
开启box1的绝对定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
/* --------使div可以跟鼠标移动----------- */
// 获取box1
var box1=document.getElementById("box1");
// 绑定鼠标移动事件
document.onmousemove=function(event){//窗口移动
// box1.onmousemove=function(event){//只限可见窗口移动
// alert(123);//测试
// 解决兼容问题
event = event ||window.event;
// 获取滚动条的距离
/*
chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
火狐等浏览器认为浏览器的滚动条是html的
*/
// var st = document.body.scrollTop
var st=document.body.scrollTop||document.documentElement.scrollTop;
var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
console.log(st);
// 获取到鼠标的坐标
/* clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
div的偏移量，是相对于整个页面的
pageX和pageY
可以获取鼠标对于当前页面的坐标
// 但是这个两个属性在IE8中不支持，所以需要兼容IE8，则不要使用
*/
var left=event.clientX;
var top=event.clientY;
// var left = event.pageX;
// var top=event.pageY;
// 设置div的偏移量
box1.style.left=left + sl +"px";
box1.style.top=top +st +"px";
}
};
</script>
</head>
<body style="height: 1000px; width: 2000px;">
<div id="box1"></div>
</body>
</html>
