js动画之多物体运动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

多个物体这不能使用一个定时器了，要给每个物体一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体运动</title>
<style>
body{margin: 0px;padding: 0px;}
.animation{
background-color: green;
margin: 10px 0px;
padding: 0px;
height: 100px;
width: 100px;
left: 0px;
top: 0px;
position: relative;
}
</style>
</head>
<body>
<div class="animation">A</div>
<div class="animation">B</div>
<div class="animation">C</div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementsByTagName("div"),
WINDOW_WIDTH = window.innerWidth - 100;
for (var i = 0; i < ele.length; i++) {
ele[i].timer = null;
ele[i].onmouseover = function(){
startAnimation(this);
}
}; function startAnimation(obj){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var _left = obj.offsetLeft,
_speed = Math.ceil((WINDOW_WIDTH - _left)/100); if (obj.offsetLeft >= WINDOW_WIDTH){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft+ _speed +'px';
console.log(obj.style.left);
console.log(obj.offsetLeft);
} },1)
} }
</script>
</html>