鼠标带动一串div运动
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="mouse.js" type="text/javascript" charset="utf-8" async defer></script>
<style type="text/css" media="screen">
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>js:
document.onmousemove=function (ev) {
var oevent=ev||event;
var odiv=document.getElementsByTagName('div');
var pos=getpos(oevent);
for (var i = odiv.length - 1; i > 0; i--) {
odiv[i].style.left = odiv[i-1].offsetLeft+'px';
odiv[i].style.top = odiv[i-1].offsetTop+'px';
}
odiv[0].style.left =pos.x+'px';
odiv[0].style.top = pos.y+'px';
};
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};
}鼠标事件：onmousemove
计算位置：scrollTop scrollLeft