<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟随鼠标</title>
<script type="text/javascript">
function load(){
var xPoint=window.event.clientX;
var yPoint=window.event.clientY;
div2.innerHTML="X="+xPoint+",Y="+yPoint;
div2.style.marginLeft=xPoint+"px";
div2.style.marginTop=yPoint+"px";
div1.onmousemove=dOnmousemove;
}
function dOnmousemove(){
var div=document.getElementById("div1");
var xPoint=window.event.clientX;
var yPoint=window.event.clientY;
div2.innerHTML="X="+xPoint+",Y="+yPoint;
div2.style.marginLeft=xPoint+"px";
div2.style.marginTop=yPoint+"px";
}
document.onmousemove=load;
</script>
</head>
<body onload="load()"style="background-color:Red">
<div id="div1" style="width:100%;height:100%" >
<div id="div2" style=" background-color:Yellow; width:100px;height:20px;">ddd</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#body {width:2000px;height:5000px;}
#div1{height:50px;width:50px;position:absolute;background:red;top:0px;left:0px;}
</style>
<script>
<!--当鼠标指针在元素内部移动时重复的触发 mosemove;-->
document.onmousemove=function(even)
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var oEvent=even||event;
oDiv.style.top = scrollTop+oEvent.clientY+"px";
oDiv.style.left=scrollLeft+oEvent.clientX+"px";
}
</script>
</head>
<body id="body">
<div id="div1" >
</div>
</body>
</html>