<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
200px;
height: 200px;
background: red;
position: absolute;
left: 0;
}
</style>
<script>
window.onload = function(){
//这样会出现一个问题 当body高度大于可是区出现滚动条的时候 鼠标oEvent.clientY是可视区的高度 而块是按body定位的
//出现滚动条后 div和鼠标位置就有了问题 怎么解决呢？clientY加上scrollTop就可以解决
document.onmousemove = function(ev){
var oEvent = ev|| event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var oDiv = document.getElementById("div1");
oDiv.style.left = oEvent.clientX + "px";
oDiv.style.top = oEvent.clientY +scrollTop+ "px";
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>
函数的封装和如何使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
200px;
height: 200px;
background: red;
position: absolute;
left: 0;
}
</style>
<script>
function getPos(ev)
{
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return { x:ev.clientX + scrollLeft , y:ev.clientY + scrollTop};
}
window.onload = function(){
document.onmousemove = function(ev){
var oEvent = ev|| event;
var oDiv = document.getElementById("div1");
//函数的使用
var pos = getPos(oEvent);
oDiv.style.left = pos.x + "px";
oDiv.style.top = pos.y + "px";
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>