<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body{height: 2000px;width: 1000px;}
div{height:30px;width: 30px;background-color: red;position: absolute;}
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var aDiv=document.getElementsByTagName('div');
document.οnmοusemοve=function(ev){
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var oEvent=ev||event;//获取事件对象,兼容性写法
for (var i = aDiv.length-1 ; i >0; i--) {
// aDiv[i].style.top=aDiv[i-1].style.top;
// aDiv[i].style.left=aDiv[i-1].style.left;
}
aDiv[0].style.top=oEvent.clientY+scrollTop+'px';//第一个DIV的坐标跟随鼠标,其余Div坐标跟随上一个DIV坐标
aDiv[0].style.left=oEvent.clientX+scrollLeft+'px';
}
// document.
}
</script>
<meta charset="UTF-8">
<title>鼠标跟随</title>
</head>
<body>
<div></div>
</body>
</html>
<html lang="en">
<head>
<style type="text/css">
body{height: 2000px;width: 1000px;}
div{height:30px;width: 30px;background-color: red;position: absolute;}
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var aDiv=document.getElementsByTagName('div');
document.οnmοusemοve=function(ev){
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var oEvent=ev||event;//获取事件对象,兼容性写法
for (var i = aDiv.length-1 ; i >0; i--) {
// aDiv[i].style.top=aDiv[i-1].style.top;
// aDiv[i].style.left=aDiv[i-1].style.left;
}
aDiv[0].style.top=oEvent.clientY+scrollTop+'px';//第一个DIV的坐标跟随鼠标,其余Div坐标跟随上一个DIV坐标
aDiv[0].style.left=oEvent.clientX+scrollLeft+'px';
}
// document.
}
</script>
<meta charset="UTF-8">
<title>鼠标跟随</title>
</head>
<body>
<div></div>
</body>
</html>