多个物体跟着鼠标移动
2018-10-30 本文已影响0人
聽說_0100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:20px;
height:20px;
border-radius: 20px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
<script>
var div = document.getElementsByTagName('div');
document.onmousemove = function(ev){
var ev = ev||event;
for(var i=div.length-1;i>=0;i--){
if(i==0){
div[i].style.left= getPos(ev).left +'px';
div[i].style.top= getPos(ev).top+'px';
}else{
div[i].style.left= parseInt(div[i-1].offsetLeft) +'px';
div[i].style.top= parseInt(div[i-1].offsetTop)+'px';
}
}
};
function getPos(ev){
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
return {
left:scrollLeft+ev.clientX,
top:scrollTop + ev.clientY
};
}
</script>
</html>
