<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: blueviolet;
/**
开启绝对定位
*/
position: absolute;
}
</style>
<script>
window.onload = function () {
var div1 = document.getElementById("box1");
//注意这里不能只绑定给颜色块，需要给整个DOM绑定，否则可能无法向上移动
document.onmousemove = function (event) {
event=event||window.event
//clientX和clientY是相对于整个页面的坐标
//pageX和pageY是相对于可见页面的坐标
//一般这种区别在于有滚动条时，可保持鼠标和滑块的相对位置不变
var left = event.clientX;
var top = event.clientY;
div1.style.left = left + "px";
div1.style.top = top + "px";
//由于需要处理兼容性问题
//我们要获取滚动条的距离，横向纵向
//chrome认为浏览器是body的，用body.scrollTop获取
//火狐等浏览器认为是html的
/*var left = event.clientX;
var top = event.clientY;
var st =document.body.scrollTop||document.documentElement.scrollTop;
var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
div1.style.left = left + st+"px";
div1.style.top = top +sl +"px";*/
}
}
</script>
</head>
<body style="height: 1000px;">
<div id="box1"></div>
</body>
</html>
该练习可以让一个对象跟随鼠标的移动而移动。
主要的问题：
1.给需要移动的标签对象添加绝对定位，否则不会移动
2.给整个窗口绑定鼠标移动事件，否则只能在标签块中获取移动事件
3.处理兼容性问题，获取参数时和获取坐标时需要处理兼容性，处理坐标时的兼容性需要获取滚动条移动的距离
4.处理滚动条移动时获取坐标的原点问题，page获取的是当前可见页面的坐标，而client获取的整个网页的坐标系坐标
